css3可控旋转音乐播放按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>星律网在线邀请</title>
<style>
*{ margin:0; padding:0; list-style:none;}
#lanren{ width:44px; position:absolute; z-index:99999; right:0; top:0;}
#lanren #audio-btn{width: 44px;height: 44px; margin:10px auto;background-size: 100% 100%;}
#lanren .on{background: url('/skin/yqx/images/music.gif') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}
#lanren .off{background: url('/skin/yqx/images/music.gif') 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>
<script src="/html_mre/layui/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div id="lanren">
        <div id="audio-btn" class="on" onClick="lanren.changeClass(this,'media')">
            <audio loop="loop" src="images/bg.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>
</body>
</html>
来源：https://www.cnblogs.com/thinkbig/p/12508287.html
标签
css3旋转
css