css3可控旋转音乐播放按钮


下面两段代码

<style>
*{ margin:0; padding:0; list-style:none;}

#lanren #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;}
#lanren .on{background: url('http://gaosky.com/assets/file/2020/05/b_004105_974131086.png') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url('http://gaosky.com/assets/file/2020/05/b_004105_1155843239.png') no-repeat 0 0;}
@-webkit-keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }
</style>

可放在网页的任意地方

<!--代码部分begin-->
<div id="lanren">
<div id="audio-btn" class="on" onclick="lanren.changeClass(this,'media')">
	<audio loop="loop" src="http://www.oldkids.cn/upload/2020/04/15/ue_15869094363535.mp3" id="media" preload="preload"></audio>
</div>
</div>
<script>
var lanren = {
	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();
	}
}
lanren.play();
</script>
<!--代码部分end-->

2020-05-07 00:19:06 通过 网页 浏览(254)

共有0条评论!

发表评论

更换一道题!
回顶部