一个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>
html5 audio标签播放完成后事件
js将div中滚动条滚动到指定位置
Js代码:
Html代码: