灵感

马黑黑 · 发表于 2024-2-3 09:37

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-2-3 09:37

代码分享

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/webp/lg.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
.mypic { position: absolute; cursor: pointer; animation: rot var(--du) infinite linear var(--state); }
.mypic:nth-of-type(1) { left: 40px; top: 100px; width: 100px; mix-blend-mode: overlay; --du: 6s; }
.mypic:nth-of-type(2) { right: 20px; top: 20px; filter: opacity(.8) blur(.5px); --du: 10s; }
.mypic:nth-of-type(3) { width: 120px; right: 30px; top: 30px; filter: opacity(.9) brightness(1.2); --du: 4s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1469522462" autoplay loop></audio>
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
<img class="mypic" src="https://638183.freep.cn/638183/small/hxxb.png" alt="" />
</div>
<script>
var btns = document.querySelectorAll('.mypic');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
btns.forEach(btn => btn.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>