css实现图标无限旋转的例子，具体效果请见网页右上角转动的音符，那是一个隐藏的按钮

代码如下

Html部分：

<div id="m" class="zhuan"></div>

CSS部分：

.zhuan {
    -webkit-animation :rotate 5s linear infinite;
    -moz-animation :rotate 5s linear infinite;
    animation :rotate 5s linear infinite;

@-webkit-keyframes rotate
{
　　 0%   {-webkit-transform:rotate(0deg)}
    100% {-webkit-transform:rotate(360deg)}
}

@-moz-keyframes rotate
{
　　 0%   {-moz-transform:rotate(0deg)}
    100% {-moz-transform:rotate(360deg)}
}
@keyframes rotate
{
　　 0%   {transform:rotate(0deg)}
    100% {transform:rotate(360deg)}
}

详解

animation是一个设置动画的属性，配合Keyframes来实现动画，Keyframes则是展示动画效果，语法如下

animation: name duration timing-function delay iteration-count direction;

参数介绍

  • name 规定需要绑定到选择器的 keyframe 名称。

  • duration 规定完成动画所花费的时间，以秒或毫秒计。

  • timing-function 规定动画的速度曲线。

  • delay 规定在动画开始之前的延迟。

  • iteration-count 规定动画应该播放的次数。

  • direction 规定是否应该轮流反向播放动画。

那么该帖子提供的例子就是 执行rotate 5秒钟完成 线性时间 无限次数

好吧，大概就是这样子，可以试一试。