小辣椒 发表于 2024-9-20 22:16

Here we stand open arms

<style>
#hy { margin: 150px 0 30px calc(50% - 781px); width: 1400px; height: 745px; border: thick groove Brown; overflow: hidden; box-sizing: border-box; position: relative; display: grid; place-items: center;}
#hy::before { position: absolute; content: ''; inset: 0; background: url('https://xlaj.cn/assets/file/zp/20240920142459.jpg') no-repeat center/cover; animation: shake .2s infinite alternate var(--state); }
.vid { position: absolute; width: 100%; height: 110%;top: -70px; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(2) { width: 200px; height: 200px; right: 580px; top: 20px; border-radius: 50%; box-shadow: 0 0 6px pink; mix-blend-mode: unset; cursor: pointer; transition: .6s; }
.vid:nth-of-type(2):hover { transform: scale(1.1); }
#psvg { position: absolute; width: 600px; height: 600px; filter: drop-shadow(150px 0 10px cyan) drop-shadow(-150px 0 10px cyan); transition: 0.75s;}
@keyframes shake { to { inset: -20px; } }
</style>

<div id="hy">
      <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/e4/55/b2/b405dc69d41ba9c14cd332859aa4414b/audio.mp3" autoplay loop></audio>
      <img id="psvg" alt="" src="https://638183.freep.cn/638183/web/svg/balls2.svg" />
      <video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f134e2c971.mp4" autoplay loop muted disablePictureinPicture></video>
      <video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/502353537f95b305e6c86256dd5b5825_preview.mp4" autoplay loop muted disablePictureinPicture title="播放/暂停"></video>
</div>

<script>
(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
                hy.style.setProperty('--state', ['running','paused'][+aud.paused]);
                vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      aud.onplaying = aud.onpause = () => mState();
      vids.onclick = ()=> aud.paused ? (aud.play(), psvg.style.opacity="1") : (aud.pause(), psvg.style.opacity="0");
      hy.oncontextmenu = (e) => e.preventDefault();
})();
</script>

小辣椒 发表于 2024-9-20 22:16

这个应该也是同一首，歌曲名称有点糊涂了:lol

liumang 发表于 2024-9-21 00:11

这首小子发过的{:5_142:}{:5_142:}{:5_142:}

liumang 发表于 2024-9-21 00:12

画面会抖动{:5_150:}{:5_150:}

liumang 发表于 2024-9-21 00:13

播放器原来是上面圆里面的视频{:5_150:}{:5_150:}

liumang 发表于 2024-9-21 00:14

小辣椒又玩了，注意身体的{:5_140:}
页: [1]
查看完整版本: Here we stand open arms