css中图片有缩放和转动效果

现在html中利用div来包裹住一张图片。

    <div class="xuanzhuan"><img src="data:images/top.png" alt=""></div>

然后在css中利用固定定位来将图片固定好，再利用动画的效果即可出来。

       .xuanzhuan {position: fixed;top: 20%;right: 10%;animation: haha 1s ease-in-out 0s infinite;}@keyframes haha {0% {transform: scale(1);/*开始为原始大小*/}25% {transform: scale(1.1);/*放大1.1倍*/}50%,70%,90% {transform: scale(1.1) rotate(3deg);}60%,80% {transform: scale(1.1) rotate(-3deg);}}

转载于:https://www.cnblogs.com/zengsf/p/10853393.html

css中图片有缩放和转动效果相关推荐

Css中图片局部放大,将图片中局部放大效果
刚毅87 我不清楚你的 bug, 我自己写了一份,你可以参考一下html> *{ margin: 0; padding: 0; } #wrap{ /*此处尺寸改为你图片的大小,画板也是如此 wi ...
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为ht ...
[css] 使用css将图片转换成黑白的效果
[css] 使用css将图片转换成黑白的效果 filter: saturate(0); 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
php图片下载代码,php下载css中图片代码
提供一个常见的php下载css中图片代码,有需要的朋友可以下载,只要把$url填写好就行了哈. 代码如下复制代码 $host = $host[1]; if (!is_dir('img')) { m ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
html如何做好看的图片效果,CSS使用图片美化的漂亮菜单效果
本文实例讲述了CSS使用图片美化的漂亮菜单效果.分享给大家供大家参考.具体如下: 这里介绍的这个菜单很漂亮,因为每个菜单项都是调用的图片,感觉这个菜单有点华而不实,毕竟菜单太多会影响网页加载,一个菜单 ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
css中图片缩小代码,css让图片等比例缩小的代码
随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢? 那就利用css的强大 ...
css 中图片旋转,倾斜,位移,平滑
在开发中,我们常常需要对图片有一些绚丽的效果,比如是图片旋转,平移,倾斜等.其实这些在css3中都已经存在,整理下作为demo,以后参考使用,也希望供大家交流学习.如果不足,多多指导. <!DO ...

css中图片有缩放和转动效果

css中图片有缩放和转动效果相关推荐

最新文章

热门文章