梦江南 发表于 2024-5-30 15:20

【尝试套用马老师的三星望月代码】大海


<style>
      #papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: lightblue; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
      .vid { position: absolute; top: -70px; width: 100%; height: calc(100% + 70px); object-fit: cover; pointer-events: none; }
      .vid:nth-of-type(2) { height: 60%; height: 60%; transform: rotate(-10deg); mix-blend-mode: screen; opacity: .5; }
      .star { position: absolute; left: 300px; top: 40px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); }
      .star:nth-of-type(2) { left: 480px; top: 160px; animation-delay: -.5s; }
      .star:nth-of-type(3) { left: 600px; top: 10px; animation-delay: -1s; }
      @keyframes ani { from { transform: rotate(-10deg) scale(.8); opacity: .2; } to { transform: rotate(10deg) scale(1.5); opacity: .9; } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=454828906" autoplay loop></audio>
      <video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/15/99/5e971f9d0a525.mp4
" loop muted></video>
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/02/5b4efb7022208.mp4" loop muted></video>
      <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
      <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
      <img class="star" alt="" src="https://638183.freep.cn/638183/t22/webp/star.webp" />
</div>

<script>
(function() {
      const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
      aud.onplaying = aud.onpause = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
                stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
      };
      stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

起个网名好难 发表于 2024-5-30 15:38

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

愤怒的葡萄 发表于 2024-5-30 16:12

现在怎么流行起三颗星星了。

梦油 发表于 2024-5-30 16:21

欣赏佳作，问候梦江南。

梦江南 发表于 2024-5-30 16:54

起个网名好难 发表于 2024-5-30 15:38


谢谢老师沙发支持，下午好！{:4_204:}

梦江南 发表于 2024-5-30 16:57

愤怒的葡萄 发表于 2024-5-30 16:12
现在怎么流行起三颗星星了。

哈哈，问好元老，马老师提供的音画代码作品总得有人去学习啊！{:4_204:}

梦江南 发表于 2024-5-30 16:58

梦油 发表于 2024-5-30 16:21
欣赏佳作，问候梦江南。

谢谢梦油版主光临支持！问好！{:4_204:}

红影 发表于 2024-5-30 21:13

这视频找得挺好的，很开阔的场景。欣赏梦江南好帖{:4_199:}

梦江南 发表于 2024-5-31 08:50

红影 发表于 2024-5-30 21:13
这视频找得挺好的，很开阔的场景。欣赏梦江南好帖

谢谢欣赏支持，早上好！{:4_204:}

梦油 发表于 2024-5-31 16:32

梦江南 发表于 2024-5-30 16:58
谢谢梦油版主光临支持！问好！

梦江南朋友不客气。

红影 发表于 2024-5-31 20:56

梦江南 发表于 2024-5-31 08:50
谢谢欣赏支持，早上好！

不客气啊，问好，周末快乐{:4_187:}
页: [1]
查看完整版本: 【尝试套用马老师的三星望月代码】大海