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{