<div id="audio_btn" class="rotate">
<audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio>
</div>
#audio_btn {
width: 30px;
height: 30px;
background-image: url(normalmusic.svg);
background-size: contain;
}
.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) }
}
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
})
var x = document.getElementById("media");
$(function(){
$("#audio_btn").click(function(){
$(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
//控制背景音乐 播放或暂停
if($(this).hasClass("rotate")){
x.play();
}else{
x.pause();
}
})
});