360音乐盒光盘旋转效果

预览效果

HTML代码

<div class="cl">
  <div class="cdbox paused">
    <div class="mark"></div>
    <img class="cdpic" width="50" height="50" class="js-player-musicImg" src="images/cd.jpg">
  </div>
  <div class="mb-play">
    <ul class="play-btns cl">
      <li class="play js-player-play ">
        <a title="暂停" class="vc-btn" hidefocus="true" href="javascript:void(0)"></a>
      </li>
    </ul>
  </div>
</div>

CSS代码

.cdbox {float:left;height:54px;overflow:hidden;position:relative;top:8px;width:54px;z-index:1}
.cdbox .mark{background: url(images/CDmark.png) no-repeat 0 0;height: 100%;left: 0;position: absolute;top: 0;width: 100%;z-index: 3}
.cdpic{margin: 2px;-webkit-animation: rotate 12s linear infinite;-moz-animation: rotate 12s linear infinite;-o-animation: rotate 12s linear infinite;animation: rotate 12s linear infinite;-khtml-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}
@-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)}
}
.mb-play { height: 50px;line-height: 50px; padding: 13px 0 9px; float:left}
.paused .cdpic{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-o-animation-play-state: paused;animation-play-state: paused}
.play-btns{float: left;margin-right: 30px}
.play-btns li{ float:left}
.play-btns li a{ cursor:pointer;display: block;overflow: hidden}
.vc-btn{background: url(images/play.png) no-repeat 0 0}
.play-btns .play .vc-btn {background-position: 0 0;height: 50px;width: 50px}
.play-btns .play .vc-btn:hover,.play-btns .play .vc-btn:active{background-position:-51px 0}
.play-btns .stop .vc-btn {  background-position: 0 -51px}
.play-btns .stop .vc-btn:hover,.play-btns .stop .vc-btn:active{background-position:-51px -51px}

JS代码

$(".js-player-play").click(function(){
  if($(this).hasClass("stop")){
    $(this).removeClass("stop").find("a").attr("title","播放");
    $(".cdbox").addClass("paused")}
  else{
    $(this).addClass("stop").find("a").attr("title","暂停");
    $(".cdbox").removeClass("paused")}
});

图片资源