相信大家都见过一些H5邀请函，打开之后会自动播放音乐，屏幕有上角也会自动360度旋转图标，以下是简单的案例，大家可以参考。
1、html部分代码：放置音乐、放置旋转按钮
<div style="display: none;">
<audio id="music1" src="music/EasyBreeze.mp3" controls>
<source src="music/EasyBreeze.mp3" type="audio/mpeg" />
</audio>
</div>
<a href="javascript:;" class="closemusic rotates"></a>
<style>
.closemusic{
display: block;
width: 2rem; height: 2rem; background: url(images/bgmBtn-fbd2dc.svg) no-repeat; background-size: 100% 100%; position: fixed; right: 0.8rem; top:0.8rem;
z-index: 11;
}
.closemusic.rotates{
animation: 2s rotates linear infinite
}
@keyframes rotates {
0%{}
100%{transform:rotate(360deg);}
}
</style>2、按钮点击事件：实现点击关闭和开启音乐
<script>
$(".closemusic").click(function(){
if($(this).hasClass('rotates')){
$(this).removeClass('rotates')
document.getElementById('music1').pause();
}else{
$(this).addClass('rotates')
document.getElementById('music1').play();
}
})
</script>3、效果展示：
4、关于ios微信不自动播放音乐可以参考这边文章：https://www.tpxhm.com/fdetail/818.html
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）