帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 581px); width: 1000px; height: 666px; background: url('https://638183.freep.cn/638183/t24/webp/fguj.webp') no-repeat center/cover; z-index: 1; position: relative; }
#play { position: absolute; width: 100px; left: calc(50% - 50px); top: 20px; opacity: .7; cursor: pointer; animation: rot 5s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1351763578" loop autoplay></audio>
<img id="play" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" />
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
var lz = {papa: '#papa', total: 30, maxsize: 25, move: false};
var mState = () => {
lz.move = !aud.paused;
papa.style.setProperty('--state', ['paused','running'][+lz.move]);
}
play.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mState();
}
window.onload = () => mState();
</script>
|