朵拉 发表于 2025-2-14 21:09

我曾听人提过他（学习马黑黑No Happy Endings效果）

<style>
      #papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp3/ims.webp') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
      #stage { position: absolute; width: 460px; height: 600px; 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: 10px;; width: 30px; height: 30px; color: white; display: grid; place-items: center; cursor: pointer; }
      #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; 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://pic1.imgdb.cn/item/67af3355d0e0a243d4ff446c.jpg" />
                <img alt="" src="https://pic1.imgdb.cn/item/67af33dad0e0a243d4ff44ba.jpg" />
                <img alt="" src="https://pic1.imgdb.cn/item/67af33f2d0e0a243d4ff44c5.jpg" />
                <img alt="" src="https://pic1.imgdb.cn/item/67af33c9d0e0a243d4ff44b7.jpg" />
                <img alt="" src="https://pic1.imgdb.cn/item/67af33e4d0e0a243d4ff44c0.jpg" />
                <img alt="" src="https://pic1.imgdb.cn/item/67af33bed0e0a243d4ff44ab.jpg" />
      </div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1424580440" 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 * 460, 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>

朵拉 发表于 2025-2-14 21:10

等清风过指隙
波澜浪潮平息
再与后来人提起你

朵拉 发表于 2025-2-14 21:11

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

红影 发表于 2025-2-14 21:33

漂亮，欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2025-2-14 21:48

欣赏朵拉好制作，也是速度完成作业的{:4_199:}

马黑黑 发表于 2025-2-14 23:39

{:4_199:}

庶民 发表于 2025-2-15 08:38

欣赏。

梦江南 发表于 2025-2-15 08:44

好快的速度，欣赏点赞！

樵歌 发表于 2025-2-15 08:44

作业速度的!
页: [1]
查看完整版本: 我曾听人提过他（学习马黑黑No Happy Endings效果）