某天在听歌的时候突然想到，歌曲的图片是怎么转起来的呢？应该是CSS3的animation属性，但具体怎么实现还是不知，于是一番研究下，有了以下的结果。
核心代码：
.rotate { animation: rotating 1.2s linear infinite; }
@keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } }
整体实现：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#audio_btn {
30px;
height: 30px;
background-image: url(./music.png); /*这里是你本地图片的路径*/
background-size: contain;
}
.rotate {
-webkit-animation: rotating 1.2s linear infinite; //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) }
}
</style>
<meta charset="utf-8">
<title>animation</title>
</head>
<body>
<div id="audio_btn">
<audio loop autoplay src="http://music.163.com/song/media/outer/url?id=22815818.mp3" id="media">
您的浏览器不支持 audio 标签。
</audio>
</div>
<script type="text/javascript">
var x = document.getElementById("media"),
btn = document.getElementById("audio_btn");
btn.addEventListener('click', function(){
this.classList.toggle("rotate");
if(this.classList.contains("rotate"))
x.play();
else
x.pause();
})
</script>
</body>
</html>
遇到的问题：audio自动播放问题，浏览器会禁止自动播放，只有在有用户交互行为时才允许play，待解决