图集1/1

正文 2369字数 421,500阅读

一个css3旋转音乐符号，默认图标呈顺时针方向转动，同时音乐开始播放
当鼠标点击的时候，图标更换，同时转动停止，音乐暂停播放
<style> *{ margin:0; padding:0; list-style:none;} #iswtfcom #audio-btn{width: 44px;height: 44px; margin:100px auto;background-size: 100% 100%;} #iswtfcom .on{background: url('https://out.img.pan.lizhenqiu.com/Fp3601S2MbBkykexL6EDGdIGW_9H') no-repeat 0 0;-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;} #iswtfcom .off{background: url('https://out.img.pan.lizhenqiu.com/Fpl3afuyAk_WiTLCFAqDIWCmUgUS') 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> <div id="iswtfcom"> <div id="audio-btn" class="on" onclick="iswtfcom.changeClass(this,'media')"> <audio loop="loop" src="https://out.img.pan.lizhenqiu.com/07f1a186774fb15e14cb8baad063c4581508916961000" id="media" preload="preload"></audio> </div> </div> <script src="https://lizhenqiu.com/templates/default/jquery.min.js"></script> <script> var iswtfcom = { 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(); } } iswtfcom.play(); </script>
Run code
Cut to clipboard