修改HTML5中audio标签默认样式,美化audio标签样式,模仿微信音乐相册中音乐播放按钮带旋转。
首页 /  web前端 /  html5 / html5 audio 样式修改 微信音乐相册音乐播放按钮

0 2 603

html5 audio 样式修改 微信音乐相册音乐播放按钮

修改HTML5中audio标签默认样式,美化audio标签样式,模仿微信音乐相册中音乐播放按钮带旋转。

html5 audio 样式修改 微信音乐相册音乐播放按钮_图一

整体代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 audio 样式修改 微信音乐相册音乐播放按钮</title>
<style type="text/css">
body{
    background:#2b2938;
}
.btn-audio{
	position:absolute;left:50%;top:50%;
    width: 40px;
    height: 40px;
    background:url(music.png) no-repeat center bottom;
    background-size:cover;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Rotation{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
</style>
</head>
<body>
<div class="btn-audio"><audio id="mp3Btn"><source src="http://p.erlyun.com/assets/data/mp3/ENFP.mp3" type="audio/mpeg" ></source></audio></div>
<script type="text/javascript" src="http://yuanmouren.erlyun.com/assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
    //播放完毕
	jQuery('#mp3Btn').on('ended', function() {
    	jQuery(".btn-audio").click();
    });
    //播放器控制
    var audio = document.getElementById('mp3Btn');
    audio.volume = .3;
    jQuery('.btn-audio').click(function() {
        event.stopPropagation();//防止冒泡
        if(audio.paused){ //如果当前是暂停状态
            jQuery(".btn-audio").addClass("Rotation");
            audio.play(); //播放
            return;
        }else{//当前是播放状态
        	jQuery(".btn-audio").removeClass("Rotation");
            audio.pause(); //暂停
        }
    });
});
</script>
</body>
</html>
下载所需:0 金币 下载 演示

[来源] http://yuanmouren.erlyun.com/p.php?id=34

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

容若 2017-10-13 13:34
10
送花
20积分一朵