css3实现音乐动画播放的例子

刚刚做了一个项目，涉及到音乐播放动画的效果，通过查找资料学习，最终实现了这一效果，还是满满的成就感，在这里就把实现的代码奉献给大家

第一步：首先写好HTML代码

第二部：给代码中的类名，标签附加样式

#audio-btn {
position: absolute;
right: 0;
display: inline-block;


background: url(images/home/music_icon.png) no-repeat center center;
background-size: 30.5px 30.5px;
}
.audio-rotate {
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite
}
 
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0)
}
to {
-webkit-transform: rotate(360deg)
}
}
 
@keyframes rotating {
from {
transform: rotate(0)
}
to {
transform: rotate(360deg)
}
}
 
@-moz-keyframes rotating {
from {
-moz-transform: rotate(0)
}
to {
-moz-transform: rotate(360deg)
}
}
这里应用的是css3的动画动能

第三部:js代码

先引入js框架

在写js实现相关效果