音乐图片旋转动画
#musicImage{
animation: rotateArround 3.5s linear 3s infinite alternate;
-webkit-animation: rotateArround 3.5s linear 3s infinite alternate;
-moz-animation: rotateArround 3.5s linear 3s infinite;
-ms-animation: rotateArround 3.5s linear 3s infinite;
-o-animation: rotateArround 3.5s linear 3s infinite;
}
@keyframes rotateArround {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}
@-webkit-keyframes rotateArround {
from {-webkit-transform: rotate(0deg);
}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotateArround {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-ms-keyframes rotateArround {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-o-keyframes rotateArround {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
进入页面监听 第一次触摸屏幕播放音乐
标签 自动播放 第一次禁音 触摸屏幕解除禁音
<audio id="music" style="display: none" class="musicControl" autoplay loop muted src="https://xxxxx/victory.mp3"></audio>
<img id="musicImage" style="position: fixed;z-index: 999;height:40px;right: 30px;top: 30px;" src="../static/webapp/mp3/icon_pause@3x.png" alt=""/>
<script>
let musicImage = document.getElementById('musicImage');
let is = 1;
musicImage.addEventListener('click', () => {
let music = document.getElementById('music');
if (is === 0) {
is = 1;
musicImage.src = '../static/webapp/mp3/icon_pause@3x.png';
music.play();
} else {
is = 0;
musicImage.src = '../static/webapp/mp3/icon_play@3x.png';
music.pause();
}
});
if (typeof WeixinJSBridge == "undefined") {
document.addEventListener('WeixinJSBridgeReady', function () {
document.getElementById('music').play();
}, false);
} else {
WeixinJSBridge.invoke("getNetworkType", {}, function () {
document.getElementById('music').play();
});
}
let play = document.addEventListener('touchstart',function () {
let music = document.getElementById('music');
music.muted=false;
musicImage.src = '../static/webapp/mp3/icon_pause@3x.png';
document.removeEventListener('touchstart',play);
});
</script>