原生css3可控旋转音乐播放按钮


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>懒人原生css3可控旋转音乐播放按钮</title>
<style>

#music_ #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;}
#music_ .on{background: url('https://haha.3ddamo.com/assets/images/music.png') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#music_ .off{background: url('https://haha.3ddamo.com/assets/images/nomusic.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>
</head>
<body>

<!--代码部分begin-->
<div id="music_">
<div id="audio-btn" class="off">
	<audio loop="loop" src="images/SeeYouAgain.mp3" id="media" preload="preload"></audio>
</div>
</div>
<script>

	document.querySelector('#audio-btn').onclick=function(){
		var ids = document.getElementById('media');
		if(hasClass(this,'on')){
			changeClass(this,'on','off')
			ids.pause()
		}else{
			changeClass(this,'off','on')
			ids.play();
		}
	}

	function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function addClass(ele,cls) {
    if (!hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}
function toggleClass(ele,cls) {
    if(hasClass(ele,cls)){
        removeClass(ele,cls);
    }
    else
        addClass(ele,cls);
}
function changeClass(ele,oldcls,newcls) {
    if (!hasClass(ele,newcls)) {
        if(hasClass(ele,oldcls)){
            removeClass(ele,oldcls);
        }
        addClass(ele,newcls);
    }
}




</script>
</body>
</html>



参考:

https://www.lanrenzhijia.com/js/css3/3064.html


回到顶部