红影 发表于 2024-9-18 20:48

《夜夜夜漫长》（学习黑黑Ancient Voices代码效果）

<style>
#hy { margin: 60px 0 30px calc(50% - 731px); width: 1300px; height: 770px; border: thick groove cyan; overflow: hidden; box-sizing: border-box; position: relative; display: grid; place-items: center;}
#hy::before { position: absolute; content: ''; inset: 0; background: url('https://pic.imgdb.cn/item/66ed7d11f21886ccc03c978a.jpg') no-repeat center/cover; animation: shake .2s infinite alternate var(--state); }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(2) { width: 200px; height: 200px; right: 550px; 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://music.163.com/song/media/outer/url?id=1844914639" 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/2475824/00/08/19/5d1ac7dc13654_10s_big.mp4" autoplay loop muted disablePictureinPicture></video>
      <video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/39/5d21bd8878094.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-18 20:50

偶尔听到这首曲子的车载音乐，觉得很刺激，就想着试一下这个效果，结果跑去网易云没找到听到的那首，而且貌似酷美网盘也废了，只能找个同名的代替了{:4_173:}

红影 发表于 2024-9-18 20:51

感谢黑黑的代码@马黑黑 {:4_187:}

小辣椒 发表于 2024-9-18 21:24

哇塞，亲爱的，好炫酷的效果，棒棒的{:4_178:}

小辣椒 发表于 2024-9-18 21:25

这个彩色粒子效果好漂亮的

小辣椒 发表于 2024-9-18 21:25

场景氛围特别的热烈，亲爱的好制作{:4_199:}

红影 发表于 2024-9-18 23:07

小辣椒 发表于 2024-9-18 21:24
哇塞，亲爱的，好炫酷的效果，棒棒的

是黑黑的粒子效果炫{:4_173:}

红影 发表于 2024-9-18 23:07

小辣椒 发表于 2024-9-18 21:25
场景氛围特别的热烈，亲爱的好制作

正好听到这歌，就做了个玩{:4_173:}

马黑黑 发表于 2024-9-18 23:28

红影 发表于 2024-9-18 20:51
感谢黑黑的代码@马黑黑

开车不打瞌睡

起个网名好难 发表于 2024-9-19 07:53

https://5b0988e595225.cdn.sohucs.com/images/20190627/2fcecd89550b4c1cb36ee7bff90ab110.gif

梦江南 发表于 2024-9-19 09:15

动感十足，像置身于音吧！好酷！{:4_204:}

梦油 发表于 2024-9-19 09:17

中秋之夜玩个通宵。

红影 发表于 2024-9-19 09:29

马黑黑 发表于 2024-9-18 23:28
开车不打瞌睡

是啊，想想舞池里的热闹场景就让人热血沸腾。
把全身都浸泡在音乐和啤酒里{:4_173:}

红影 发表于 2024-9-19 09:30

起个网名好难 发表于 2024-9-19 07:53


谢谢难难，有时还是很喜欢劲爆音乐，提气儿{:4_173:}

红影 发表于 2024-9-19 09:31

梦江南 发表于 2024-9-19 09:15
动感十足，像置身于音吧！好酷！

江南也喜欢吧，偶尔的放浪形骸也挺快乐的{:4_173:}

红影 发表于 2024-9-19 09:33

梦油 发表于 2024-9-19 09:17
中秋之夜玩个通宵。

跳一个晚上估计受不了，跳个一小时就要不停喝啤酒或饮料了，喝的消费，嘿，绝对比门票贵{:4_173:}
不过人上头的时候肯定停不下来{:4_170:}

起个网名好难 发表于 2024-9-19 10:04

红影 发表于 2024-9-19 09:30
谢谢难难，有时还是很喜欢劲爆音乐，提气儿

只是那图片可以较好的回复帖子

朵拉 发表于 2024-9-19 15:59

这画面 这音乐，相当给力~~{:4_204:}

红影 发表于 2024-9-19 16:16

起个网名好难 发表于 2024-9-19 10:04
只是那图片可以较好的回复帖子

蹦起来更快乐{:4_173:}

红影 发表于 2024-9-19 16:16

朵拉 发表于 2024-9-19 15:59
这画面 这音乐，相当给力~~

谢谢朵宝，一起乐起来{:4_177:}
页: [1] 2 3 4 5 6
查看完整版本: 《夜夜夜漫长》（学习黑黑Ancient Voices代码效果）