使⽤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;
}
rotate属性$(document).ready(function(){
$("#pointer").click(function(){
$(this).toggleClass("pause");
});
});
这时候，点击圆盘就暂停，再点击就继续。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。