使用CSS3动画属性实现360无限循环旋转【代码片段】

使用CSS3的animation动画属性实现360°无限循环旋转。

代码片段：

<div id="test">

　　<img src='/images/loading.gif' data-original="http://www.cnblogs.com//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属性！！！

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：使用CSS3动画属性实现360无限循环旋转【代码片段】

关键词：CSS