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")} });
图片资源