css控制网页图片360°旋转代码

感谢您访问小篮博客”,本站专注活动分享,SEO技术,网站源码,绿色软件等免费资源分享希望大家能够多多支持哦!喜欢本站的朋友可以把本站添加到书签或记住网址,本站网址:www.nswin.cc, 站长 QQ 123326923
  • 内容
  • 相关

当鼠标停留在图片上的时候,图片进行顺时针360度旋转。

当鼠标离开图片的时候,图片逆时针旋转回到原来的位置。

这一段是需要在网页的style.css中添加一段代码就行,

img{
    -webkit-transition: 0.7s;
    -webkit-transition: -webkit-transform 0.7s ease-out;
    transition: transform 0.7s ease-out;
    -moz-transition: -moz-transform 0.7s ease-out;
}
  
img:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

把以上代码复制到你网站调用的css文件中,通常为style.css,在最底部添加进去保存后上传覆盖原来的css文件就可以。

记得以前发布过一个网站图片抖动特效,也是由CSS控制的,有需要的可以参考或者使用一下。



本文标签:

版权声明:若无特殊注明,本文皆为《小蓝博客》网络转载而来。并不代表本站立场。

文章标题:css控制网页图片360°旋转代码

本文链接:https://www.nswin.cc/181.html

收录状态:[百度已收录]

二维码加载中……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知