@keyframes music {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
}
}
.music_tool{
animation-name:music;
animation-duration:3s; //执行一次动画需要的时间
-webkit-animation-name:music;
-webkit-animation-duration:3s;
animation-iteration-count:infinite; //动画执行次数
-webkit-animation-iteration-count:infinite;
animation-timing-function:linear; //动画效果曲线
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
// document.getElementById("music-tool").classList.add('music_tool'); //添加动画
// document.getElementById("music-tool").classList.remove('music_tool'); //移除动画
document.getElementById("music-tool").style.animationPlayState = "running"; //设置动画状态
document.getElementById("music-tool").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代
document.getElementById("music-tool").style.animationPlayState = "paused"; //设置动画状态
document.getElementById("music-tool").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代
jquery:
$('xxx').stop() 或者 $('xxx').stop().animate();
或者
$(this).css({
"animation-play-state":"paused"
})
// autoplay 自动播放 loop 循环播放 preload 则音频在页面加载时进行加载，并预备播放。
controls 如果出现该属性，则向用户显示控件，比如播放按钮。
<audio id="music" autoplay loop preload="auto">
<source src="music.mp3" >
</audio>
//检测播放是否已暂停.audio.paused 在播放器播放时返回false.
// alert(audio.paused);
//音频时长 s
// alert(audio.duration);
audio.play();//audio.play();// 这个就是播放
audio.pause();// 这个就是暂停