CSS3实现旋转音乐按钮

在手机H5活动页上音乐静音按钮是个非常常见的需求，今天我们来实现一下。：）

• 先准备一下音乐图标，状态on和off各一张，以及音乐文件

html代码非常简单:

<div id="music">
   <div id="audio-btn" class="on" onclick="music.changeClass(this,'media')">
<audio loop="loop" src="assets/LastChristmas.mp3" id="media" preload="preload"></audio>
   </div>
   </div>

CSS3代码，这里自定义animation属性名为rotating，结合@keyframes规则定义图标旋转过程，from是动画开始状态，to是动画结束状态，看代码应该比较好理解：

#music #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;}
#music .on{background: url('images/music_on.png') no-repeat 0 0;-webkit-animation: rotating 4.0s linear infinite;animation: rotating 4.0s linear infinite;}
#music .off{background: url('images/music_off.png') no-repeat 0 0;}

jQuery设定按钮事件，切换之前CSS定义的class on and off。

var music = {
changeClass: function (target,id) {
       var className = $(target).attr('class');
       var ids = document.getElementById(id);
       (className == 'on')
           ? $(target).removeClass('on').addClass('off')
           : $(target).removeClass('off').addClass('on');
       (className == 'on')
           ? ids.pause()
           : ids.play();
   },
play:function(){
    document.getElementById('media').play();
}
}
music.play();

在线demo