css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效

css3动画应用-音乐唱片旋转播放特效

核心点：

1、设置图片为圆形居中，使图片一直不停旋转。

2、文字标题(潘玮柏--反转地球)一直从左到右不停循环移动。

3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。

1、动设置图片为圆形居中，使图片一直不停旋转。

核心代码：

#xuanzhuan{

-webkit-animation: play 10s linear infinite;

-moz-animation: play 10s linear infinite;

animation: play 10s linear infinite;

}

@-webkit-keyframes play{

0%{-webkit-transform: rotate(0deg);}

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

}

@-moz-keyframes play {

0%{-moz-transform: rotate(0deg);}

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

}

@keyframes play{

0%{transform: rotate(0deg);}

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

}

2、文字标题(潘玮柏--反转地球)一直从左到右不停循环移动。

核心代码：

.title p{

position: relative;

top: 0px;

left: 0px;

right: 0px;

margin: auto;

text-align: center;

-webkit-animation: anim2 8s linear infinite;

}

@-webkit-keyframes anim2 {

0% { left: 200px; opacity: 0.2}

25% { left: 100px; opacity: 0.6}

50% { left: 0px; opacity: 1}

75% { left: -100px; opacity: 0.6}

100% { left: -200px; opacity: 0.2}

}

3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。

核心代码：

//当音乐播放完停止时，自动停止图片旋转

audio.addEventListener("ended",function(event){//xuanzhuan.setAttribute("id","");

xuanzhuan.style.animationPlayState = "paused";

},false);//点击暂停播放时，音乐暂停，图片停止旋转

icon1.οnclick=function(){

audio.pause();

pic1.style.display="none";

pic2.style.display= "block";//xuanzhuan.setAttribute("id","");

xuanzhuan.style.animationPlayState = "paused";

};//点击播放音乐时，音乐开始播放，图片开始旋转

icon2.οnclick=function(){

audio.play();

pic1.style.display="block";

pic2.style.display= "none";//xuanzhuan.setAttribute("id","xuanzhuan");

xuanzhuan.style.animationPlayState = "running";

}

实例：

rotate音乐唱片旋转特效

潘玮柏--反转地球