醉美水芙蓉 发表于 前天 21:33

静悟音画《酒醉的蝴蝶》


<style>
#papa { --state: running; --showbackface: visible; margin: 30px 0 30px calc(50% - 721px); width: 1280px; height:720px; background: url('https://pic1.imgdb.cn/item/67b5583fd0e0a243d400ab3f.jpg') 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; left: 750px; top:160px; 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>

klxf 发表于 前天 22:49

漂亮！谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 昨天 06:11

klxf 发表于 2025-2-20 22:49
漂亮！谢谢醉美管理员精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 静悟音画《酒醉的蝴蝶》