CSS3实现旋转音乐按钮


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

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

html代码非常简单:

1
2
3
4
5
<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

效果图