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

| 阅读数:--次| 作者:html5,css3
摘要:使用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属性!!!

 

返回顶部
学到老代码浏览 关闭浏览