灵感
<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>
代码分享
<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>
好看！欣赏学习了！{:4_180:} 亦是金 发表于 2024-2-3 10:23
好看！欣赏学习了！
早上好。这是很简洁的音画 这两朵小花儿放得真美妙{:4_199:} 美女练愈加也是出境了{:4_199:} 好吧，其实是一朵，被不同修饰和摆放，成就了这么美的效果。尤其左边的那朵浅蓝，好美{:4_187:} 红影 发表于 2024-2-3 11:53
好吧，其实是一朵，被不同修饰和摆放，成就了这么美的效果。尤其左边的那朵浅蓝，好美
同质化是要处理一下下的 红影 发表于 2024-2-3 11:34
这两朵小花儿放得真美妙
{:4_190:} 小辣椒 发表于 2024-2-3 11:53
美女练愈加也是出境了
挺好的吧？毫毛都能显示出来，虽然我降低了清晰度 马黑黑 发表于 2024-2-3 12:14
同质化是要处理一下下的
这个构思很奇妙。画面也看着好看{:4_187:} 马黑黑 发表于 2024-2-3 12:15
挺好的吧？毫毛都能显示出来，虽然我降低了清晰度
你数了她有多少毫毛么{:4_196:} 舞者的姿势好美。 梦油 发表于 2024-2-3 17:24
舞者的姿势好美。
下午好 红影 发表于 2024-2-3 14:10
你数了她有多少毫毛么
没时间呢 红影 发表于 2024-2-3 14:09
这个构思很奇妙。画面也看着好看
做帖子，能做加法，也能做减法，能且会，那就比较理想。 马黑黑 发表于 2024-2-3 17:46
没时间呢
也是快乐的事{:4_173:} 马黑黑 发表于 2024-2-3 17:47
做帖子，能做加法，也能做减法，能且会，那就比较理想。
对黑黑来说，这个不是问题，对我们来说，就是考验{:4_173:} 红影 发表于 2024-2-3 18:27
对黑黑来说，这个不是问题，对我们来说，就是考验
考验一下也好 红影 发表于 2024-2-3 18:27
也是快乐的事
挺好的