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

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

第一步：首先写好HTML代码

<div id="audio-btn" class="audio-rotate">
<audio loop" width=100% src="mp3/qwe.mp3" id="media" autoplay="autoplay" preload=""></audio>
</div>
是不是很简单呢

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

#audio-btn {
position: absolute;
right: 0;
display: inline-block;
width: 30px;
height: 30px;
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框架

<script" width=100% src=”js/jquery-2.1.4.min.js”></script>

在写js实现相关效果

<script>
var x = document.getElementById("media");
$(function(){
$("body").on("click","#audio-btn",function(){
$(this).toggleClass("audio-rotate");
})
})
</script>
<script>
var x = document.getElementById("media");
$(function(){
$("body").on("click","#audio-btn",function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
 
//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.pause();
}else{
x.play();
}
})
});
</script>