使用CSS3动画属性实现360°无限循环旋转【代码片段】
摘要：使用CSS3的animation动画属性实现360°无限循环旋转。代码片段： //图片路径自定义CSS样式书写如下：#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}@-w...
使用CSS3的animation动画属性实现360°无限循环旋转。
代码片段：
<div id="test">
<img src="/CSS3/img/yinyue.png" id="change" /> //图片路径自定义
</div>
CSS样式书写如下：
#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}
@-webkit-keyframes change
{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
搞定！！！当然，这里只写了chrome/Safari浏览器的兼容，其它的可再加上：
@-moz-keyframes change{***} 火狐
@-ms-keyframes change{***} IE
@keyframes change{***} W3C
Opera浏览器不支持animation属性！！！
相关文章
最新发布
阅读排行
热门文章
猜你喜欢