在html页面中加入class="play"; 利用两个图像的z-index关系控制是否遮盖
代码如下 (省略-o -ms内核)
#music > img.play {
/* 兼容 */ -webkit-animation: music_disc 4s linear infinite;
animation: music_disc 4s linear infinite;
/*设置动画样式:动画名称 周期(秒)匀速 重复进行*/}
@keyframes music_disc/**设置动画时间/ {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)/*旋转多少度*/;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes music_disc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。