看到音乐播放器播放界面的唱片一直旋转，突然想到在网页中的一直旋转效果，所有特地查了一下分享出来
这是一个静态的div,然后把它旋转动起来。效果请看右上角的音乐播放按键一样。
代码如下：
<html> <head> <meta charset="UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <style> #xuanzhun{ -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 1s; -moz-transition-property: -moz-transform; -moz-transition-duration: 1s; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; -o-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; } @-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)} to{-webkit-transform: rotate(360deg)} } @-moz-keyframes rotate{from{-moz-transform: rotate(0deg)} to{-moz-transform: rotate(359deg)} } @-o-keyframes rotate{from{-o-transform: rotate(0deg)} to{-o-transform: rotate(359deg)} } @keyframes rotate{from{transform: rotate(0deg)} to{transform: rotate(359deg)} } </style> </head> <body> <div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;"> </div> </body> </html>
最重要的是style中的css部分。