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