小辣椒 发表于 2024-9-20 21:51

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 21:52

@马黑黑
谢谢黑黑源码分享，套用玩一个

小辣椒 发表于 2024-9-20 21:53

@红影

亲爱的，抄个作业{:4_173:}，反正你的就是我的

红影 发表于 2024-9-20 22:19

这个漂亮，小播里的动图和背景上的人物，相互呼应，真漂亮{:4_199:}

红影 发表于 2024-9-20 22:22

阴影的青色在这个帖子里好清楚的呢。
歌曲好听，制作漂亮，欣赏亲爱的好帖{:4_187:}

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

红影 发表于 2024-9-20 22:19
这个漂亮，小播里的动图和背景上的人物，相互呼应，真漂亮

抄作业做的就是快{:4_170:}

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

红影 发表于 2024-9-20 22:22
阴影的青色在这个帖子里好清楚的呢。
歌曲好听，制作漂亮，欣赏亲爱的好帖

背景图拉了渐变效果

红影 发表于 2024-9-20 22:42

小辣椒 发表于 2024-9-20 22:39
抄作业做的就是快

亲爱的有好的素材啊，这也是做的快的基础呢{:4_173:}

红影 发表于 2024-9-20 22:43

小辣椒 发表于 2024-9-20 22:39
背景图拉了渐变效果

嗯嗯，这效果漂亮{:4_204:}

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

红影 发表于 2024-9-20 22:42
亲爱的有好的素材啊，这也是做的快的基础呢

亚伦发的视频做的

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

红影 发表于 2024-9-20 22:43
嗯嗯，这效果漂亮

现在发现做的视觉效果漂亮就可以了{:4_170:}

起个网名好难 发表于 2024-9-21 07:38

https://img0.baidu.com/it/u=2507587440,1767895428&fm=253&fmt=auto&app=138&f=GIF

梦江南 发表于 2024-9-21 08:41

画面真漂亮，音乐动感，太赞啦！{:4_187:}

梦油 发表于 2024-9-21 09:07

欣赏美曲，问候小辣椒。

红影 发表于 2024-9-21 10:11

小辣椒 发表于 2024-9-20 22:46
亚伦发的视频做的

嗯嗯，这人物很漂亮{:4_204:}

红影 发表于 2024-9-21 10:12

小辣椒 发表于 2024-9-20 22:47
现在发现做的视觉效果漂亮就可以了

是啊，做出漂亮的效果，自己也喜欢{:4_173:}

马黑黑 发表于 2024-9-21 11:40

{:4_199:}

小辣椒 发表于 2024-9-21 20:49

起个网名好难 发表于 2024-9-21 07:38


难难晚上好，谢谢欣赏{:4_187:}

小辣椒 发表于 2024-9-21 20:49

梦江南 发表于 2024-9-21 08:41
画面真漂亮，音乐动感，太赞啦！

谢谢梦江南欣赏 {:4_171:}

小辣椒 发表于 2024-9-21 20:50

梦油 发表于 2024-9-21 09:07
欣赏美曲，问候小辣椒。

梦油晚上好，谢谢欣赏{:4_187:}
页: [1] 2
查看完整版本: Here we stand open arms （套用黑黑粒子效果）