酒醉的蝴蝶（学习黑黑老师的 Minimal bass代码）
<style>
#papa { --state: running; --showbackface: visible; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic1.imgdb.cn/item/67b44698d0e0a243d4007b37.png') no-repeat center/cover; box-shadow: 2px 2px 8px rgba(0,0,0,.5); perspective: 4000px; z-index: 1; position: relative; border-radius:32px;}
#papa:hover #backface { display: inline-block; }
#mplayer { position: absolute; right: 330px; top: 120px; width: 260px; height: 450px; transform-style: preserve-3d; display: grid;place-item: center; animation: rot 20s linear infinite var(--state); }
#mplayer:hover { --state: paused; }
.image { position: absolute; width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(2px 2px 20px #000); cursor: pointer; transition: .7s; backface-visibility: var(--showbackface); transform: rotateY(var(--deg)) translateZ(300px); }
.image:hover { transform: rotateY(var(--deg)) translateZ(300px) scale(1.2); }
#backface { position: absolute; bottom: 50px; right: 400px; border-radius: 6px; cursor: pointer; display: none; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<input id="backface" type="button" value="隐藏背面" />
<audio id="aud" src="https://cccimg.com/view.php/4beb56f678eb25bb94d2645fe459974e.mp3" autoplay loop></audio>
</div>
<script>
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.title = aud.paused ? '点击播放' : '点击暂停';
};
var pics = [
'https://pic1.imgdb.cn/item/67b446cbd0e0a243d4007b43.png',
'https://pic1.imgdb.cn/item/67b4475fd0e0a243d4007b77.png',
'https://pic1.imgdb.cn/item/67b4478ad0e0a243d4007b82.png',
'https://pic1.imgdb.cn/item/67b447b2d0e0a243d4007b86.png',
'https://pic1.imgdb.cn/item/67b447e5d0e0a243d4007b99.png',
'https://pic1.imgdb.cn/item/67b4482fd0e0a243d4007bac.png',
];
Array.from({length: pics.length}).forEach((img,key) => {
img = document.createElement('img');
img.className = 'image';
img.style.cssText += `--deg: ${key * 360 / pics.length}deg`;
img.src = pics;
mplayer.appendChild(img);
});
aud.onpause = aud.onplaying = () => mState();
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
backface.onclick = () => {
if(backface.value === '隐藏背面') {
papa.style.setProperty('--showbackface', 'hidden');
backface.value = '显示背面';
}else{
papa.style.setProperty('--showbackface', 'visible');
backface.value = '隐藏背面';
}
};
papa.scrollIntoView(true);
</script>
老师好制作，欣赏加学习 感谢分享 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 漂亮，底图选得好，正好为旋转图片留出了位置。
旋转图也选得好，那么多漂亮的蝴蝶儿{:4_199:} 欣赏江南好帖{:4_199:} 阿姨速度的，我才刚看见黑黑的分享，这里已经作业出来了{:4_199:} 酒醉的蝴蝶好听，配的还都是蝴蝶的图图{:4_199:} 欣赏阿姨精彩的作业，赞一记！ 世外桃源 发表于 2025-2-18 17:58
老师好制作，欣赏加学习
早上好，谢谢老师沙发分享支持。 世外桃源 发表于 2025-2-18 17:58
感谢分享
谢谢老师再次支持互动。谢谢！ 起个网名好难 发表于 2025-2-18 18:01
早上好，谢谢老师分享支持。 红影 发表于 2025-2-18 20:09
漂亮，底图选得好，正好为旋转图片留出了位置。
旋转图也选得好，那么多漂亮的蝴蝶儿
早上好，谢谢影子仅为支持鼓励。蝴蝶漂亮多的呢，只能用6张。 红影 发表于 2025-2-18 20:09
欣赏江南好帖
谢谢影子再次鼓励！{:4_187:} 小辣椒 发表于 2025-2-18 21:18
阿姨速度的，我才刚看见黑黑的分享，这里已经作业出来了
早上问好，您要忙工作，又要忙上网还要做帖，哪有时间呢。 小辣椒 发表于 2025-2-18 21:18
酒醉的蝴蝶好听，配的还都是蝴蝶的图图
这首酒醉的蝴蝶是电吹管纯音乐的，自己录音的。美女多了都是千篇一律的，来几张美丽的蝴蝶吧。 小辣椒 发表于 2025-2-18 21:19
欣赏阿姨精彩的作业，赞一记！
谢谢小辣椒分享支持。{:4_187:} 梦江南 发表于 2025-2-19 08:14
早上好，谢谢影子仅为支持鼓励。蝴蝶漂亮多的呢，只能用6张。
好像多加点也没问题呢，给它留空间就行了{:4_173:} 梦江南 发表于 2025-2-19 08:14
谢谢影子再次鼓励！
太客气了，再赏江南好帖{:4_187:} 红影 发表于 2025-2-19 13:28
好像多加点也没问题呢，给它留空间就行了
看到小辣椒的帖子里多了二张。这就是差距吧！我不会。{:4_201:}