版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/diaoweixiao/article/details/87902213
首先看下效果图:
要实现的效果:
1.小icon自动旋转
2.音乐自动播放
一. 小icon css 自动无限旋转
<img class='musicImg' src='' />
.musicImg{animation:xz 1s linear infinite;}
@keyframes xz{
from {transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
二. vue 音乐自动播放(想要让背景音乐自动播放,并且不受页面滑动切换的影响,这部分代码一定是放在公共的地方的,所以我选择把这部分代码放在App.vue中)
<!-- android autoplay属性的设置就会自动播放该音乐 -->
<audio id="music" preload loop="loop" autoplay src=''></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
function autoPlayVideo(){
wx.config({
debug:false,
appId:"",
timestamp:1,
nonceStr:"",
signature:"",
jsApiList:[]
});
wx.ready(function(){
var autoplayVideo = document.getElementById("music");
autoplayVideo.play()
})
};
autoPlayVideo();