看了很多场景应用，右上角总是会有一个音频按钮，会播放音乐，现在通过简单几步就可以实现这个功能。
1.先上基础的html，定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接)
2.添加css进行美化
*{margin:0px;padding:0px;}
body{background:#000;}
/* music */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:10px;top:20px;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width: 25px; height: 25px;overflow:hidden;background:url('./images/mcbg.png') no-repeat;background-size:100%;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
这里的css里面有个背景图，是个旋转的按钮，点击这里下载mcbg.png
3.添加JS(之前不要忘 )
function play_music(){
if(music.paused){
music.play();
$('#mc_play').attr('class','on');
}else{
music.pause();
$('#mc_play').attr('class','stop');
}
}
这个时候基本就已经OK了，最后来一张效果图吧
喜欢 (10)or分享 (0)
