梦风雨 发表于 2025-2-15 17:05

倾听音乐

本帖最后由 梦风雨 于 2025-3-4 22:32 编辑 <br /><br /><style>
      #papa { margin: 30px 0 30px calc(50% - 601px); width: 1200px; height: 720px; background: url('https://www.bohann.net/data/attachment/forum/202501/11/172052fammiflla81zuf99.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; }
      #stage { position: absolute; width: 460px; height: 600px; overflow: hidden; cursor: pointer; }
      #stage img { width: 100%; height: 100%; float: left; mask: radial-gradient(closest-side, red, 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://bohann.net/data/attachment/forum/202408/08/113357qs1n51ln115ovs1n.jpg" />
                <img alt="" src="https://bohann.net/data/attachment/forum/202402/04/161052cbx11p3bj3b3324g.gif" />
                <img alt="" src="https://bohann.net/data/attachment/forum/202408/08/113357qs1n51ln115ovs1n.jpg" />
                <img alt="" src="https://bohann.net/data/attachment/forum/202402/04/161052cbx11p3bj3b3324g.gif" />
                <img alt="" src="https://bohann.net/data/attachment/forum/202408/08/113357qs1n51ln115ovs1n.jpg" />
                <img alt="" src="https://bohann.net/data/attachment/forum/202402/04/161052cbx11p3bj3b3324g.gif" />
      </div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=27770747" 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({top: idx * stage.clientHeight, 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();
papa.scrollIntoView(true);
</script>

梦风雨 发表于 2025-2-15 17:05

这个音乐很动感，欣赏聆听。

小辣椒 发表于 2025-2-15 18:30

问好风雨，音乐很动感的{:4_208:}

代码效果没有出来，你这个图片变形了，图宽是1000的

红影 发表于 2025-2-15 20:15

就一张图片么，没有翻页动作呢{:4_187:}

梦风雨 发表于 2025-2-15 20:44

小辣椒 发表于 2025-2-15 18:30
问好风雨，音乐很动感的

代码效果没有出来，你这个图片变形了，图宽是1000的

原来是这样，问好小辣椒{:4_191:}

梦风雨 发表于 2025-2-15 20:45

红影 发表于 2025-2-15 20:15
就一张图片么，没有翻页动作呢

偷懒了，问好红影{:4_191:}

小辣椒 发表于 2025-2-15 21:46

梦风雨 发表于 2025-2-15 20:44
原来是这样，问好小辣椒

你看代码尺寸是460X600的，你宽度太宽的

梦风雨 发表于 2025-2-15 22:20

小辣椒 发表于 2025-2-15 21:46
你看代码尺寸是460X600的，你宽度太宽的

多谢提点，辛苦您了。{:4_191:}

红影 发表于 2025-2-16 08:31

梦风雨 发表于 2025-2-15 20:45
偷懒了，问好红影

这样的翻转也挺好，很漂亮{:4_187:}

梦江南 发表于 2025-2-16 08:39

欣赏佳作，问好老师！{:4_199:}

梦风雨 发表于 2025-2-16 09:43

红影 发表于 2025-2-16 08:31
这样的翻转也挺好，很漂亮

修过了一下，多谢鼓励。{:4_191:}

梦风雨 发表于 2025-2-16 09:43

梦江南 发表于 2025-2-16 08:39
欣赏佳作，问好老师！

问好大家，分享聆听。{:4_191:}

红影 发表于 2025-2-16 13:19

梦风雨 发表于 2025-2-16 09:43
修过了一下，多谢鼓励。

嗯嗯，现在能翻转了，很漂亮{:4_187:}

梦风雨 发表于 2025-2-16 16:08

红影 发表于 2025-2-16 13:19
嗯嗯，现在能翻转了，很漂亮

一开始没有翻转的效果，没有制作好，{:4_191:}

红影 发表于 2025-2-16 20:46

梦风雨 发表于 2025-2-16 16:08
一开始没有翻转的效果，没有制作好，

现在这个图片还是有点失真呢，估计是把方形的硬变成长方形了的缘故。

梦风雨 发表于 2025-2-17 09:10

红影 发表于 2025-2-16 20:46
现在这个图片还是有点失真呢，估计是把方形的硬变成长方形了的缘故。

谢谢红影的提点。{:4_191:}

红影 发表于 2025-2-17 18:57

梦风雨 发表于 2025-2-17 09:10
谢谢红影的提点。

不过比前一个好，前一个更感觉到失真{:4_173:}

梦风雨 发表于 2025-2-17 22:43

红影 发表于 2025-2-17 18:57
不过比前一个好，前一个更感觉到失真

谢谢非常感谢，有进步空间。{:4_191:}

红影 发表于 2025-2-18 20:56

梦风雨 发表于 2025-2-17 22:43
谢谢非常感谢，有进步空间。

又加新的图图了啊，真好{:4_187:}
页: [1]
查看完整版本: 倾听音乐