醉美水芙蓉 发表于 2025-3-5 22:32:58

此生无憾

<style>
      #papa { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 710px; background: url('https://www.bohann.net/data/attachment/forum/202503/05/105459nqzeome0r7s70ms4.jpeg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; border-radius:24px;}
      #stage { position: absolute; font-size: 0; width: 350px; height: 480px; left: 200px;top:20px;border-radius: 50%; overflow: hidden; white-space: nowrap; cursor: pointer; }
      #stage img { width: 100%; height: 100%; mask: radial-gradient(red, transparent); }
      #stage img:hover { mask: unset; }
      #btnplay { --state: running; position: absolute; bottom: 30%; width: 30px; height: 30px;left: 38%; color: Crimson; display: grid; place-items: center; cursor: pointer; }
      #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed Black; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
      #btnplay:hover::before { border-style: dotted; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <div id="stage">
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213744f5kh2sjaqw5hhpk5.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213559v22z4n0drvk42332.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213554s9pwz92zywek1uyu.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213555quvueyga07v0zg50.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213557wqtpqrqc4qt9i4qx.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213739jqmbb1b66l3115um.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213741xmp4zlxlekzdp9db.jpg" />
                <img alt="" src="https://www.bohann.net/data/attachment/forum/202503/05/213742k2phpep512dn2b4e.jpg" />

      </div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/bb1f-audiofreehighqps/2B/C0/GAqhp50Lg2x4ACAAAANmFgc4.m4a" autoplay loop></audio>
</div>

<script>
var lastIdx = 0, pTimer;
var images = stage.querySelectorAll('img');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
      idx = Math.floor(Math.random() * images.length);
      if(idx === lastIdx) idx = (idx+1) % images.length;
      lastIdx = idx;
      btnplay.innerText = idx + 1;
      stage.scroll({left: idx * 350, top: 0, behavior: 'smooth'});
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 3000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

klxf 发表于 2025-3-5 22:52:58

效果极佳！借美帖提前祝福醉美管理员女神节快乐:)

醉美水芙蓉 发表于 2025-3-6 23:33:25

klxf 发表于 2025-3-5 22:52
效果极佳！借美帖提前祝福醉美管理员女神节快乐

谢谢友友支持！

pzqyhkor 发表于 2025-3-20 18:51:26

zhenglunyi 发表于 2025-3-24 18:55:31

支持博主，内容超吸引人

lanmeigui 发表于 2025-4-2 08:57:20

感谢分享，让我豁然开朗
页: [1]
查看完整版本: 此生无憾