使用CSS3動畫屬性實現360°無限循環旋轉【代碼片段】


使用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屬性!!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM