使用css3实现圆形并旋转的问题

百度首页有个音乐功能，点击圆盘，磁碟图片就转了起来，再点击，又停下来，用firebug查看其源代码，并得到如何实现：

1. 首先我们定义一个div，可以给一个id，比如pointer

<div  id=”pointer” ></div>

2. 把它设置成圆形并填充图片，这里我就用画图做了一个简单的箭头，用作指示。

#{

    height:100px;
    width:100px;
    border-radius: 50%;    //圆角设成一半，就变成圆形了
    display:inline-block;
    background:url("img/pointer.jpg");   //用背景图片来代替img标记

}

3. 再添加animation属性，设置动画的一些属性，再由@keyframes来实现动画效果

#pointer{
    animation: rotate 60s linear 0s infinite normal;
}

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

}

这样，打开网页，整个圆盘就开始旋转了。再实现点击暂停的功能，这里用到了jquery的toggleClass方法，并设置一个暂停的属性。

.pause{
    animation-play-state:paused;
}

$(document).ready(function(){
    $("#pointer").click(function(){
        $(this).toggleClass("pause");
    });
});

这时候，点击圆盘就暂停，再点击就继续。