朵拉 发表于 2025-1-27 16:36

拜 新 年 TO：论坛朋友们蛇年大吉！

<style>
#papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1024px; height: 640px; overflow: hidden; background: lightblue url('https://pic1.imgdb.cn/item/67974161d0e0a243d4f82fa7.jpg')no-repeat center/cover; box-shadow: 2px 2px 12px #000; }
.vid { position: absolute; top: -100px; width: 1024px; height: 500px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
.vid:nth-of-type(2) { transform: scale(1,-1); top: 400px; opacity: .56; }
.vid:nth-of-type(3) { top: 60px; width: 1124px; height: 700px; }
.player { position: absolute; left: -100px; width: 100px; cursor: pointer; animation: move 80s linear infinite var(--state); }
.player:nth-of-type(1) { top: 20px; }
.player:nth-of-type(2) { transform: scale(1,-1); bottom: 20px; opacity: .5; }
@keyframes move { to { left: 1024px; } }
</style>

<div id="papa">
      <audio id="aud" src="https://www.kumeiwp.com/wj/261/2021/02/09/376576879fcb7ac451a6feca45863b53.mp3" autoplay="" loop=""></audio>
      
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" loop muted></video>
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" loop muted></video>
      
      <img class="player" alt="" src="https://638183.freep.cn/638183/small/kite.png" />
      <img class="player" alt="" src="https://638183.freep.cn/638183/small/kite.png" />
</div>

<script>
var vids = document.querySelectorAll('.vid'), players = document.querySelectorAll('.player');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vidplay(false)) : (papa.style.setProperty('--state', 'running'),vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>

梦油 发表于 2025-1-27 16:39

祝朵拉和朋友们春节快乐！

愤怒的葡萄 发表于 2025-1-27 16:55

祝坛友们新春愉快！！！~~~

朵拉 发表于 2025-1-27 17:11

@马黑黑
老师好，有空来看下这帖子，
烟花不动了，哪里出故障了{:4_190:}

朵拉 发表于 2025-1-27 17:11

@红影
影宝好，有空来看下这帖子，
烟花不动了，哪里出故障了{:4_190:}

朵拉 发表于 2025-1-27 17:12

@小辣椒
小辣椒好，有空来看下这帖子，
烟花不动了，哪里出故障了{:4_190:}

庶民 发表于 2025-1-27 17:13

春节提前拜年。

红影 发表于 2025-1-27 19:20

朵拉 发表于 2025-1-27 17:11
@红影
影宝好，有空来看下这帖子，
烟花不动了，哪里出故障了

我这里烟花动的啊，可能是你网速问题吧。
谢谢朵宝，也祝你新春快乐{:4_177:}

小辣椒 发表于 2025-1-27 20:59

欣赏朵拉漂亮的贺帖{:4_199:}

小辣椒 发表于 2025-1-27 21:00

借朵拉美帖，祝朋友们新年快乐！

樵歌 发表于 2025-1-27 21:43

灿烂礼花迎新年,祝朵儿新年快乐！
页: [1]
查看完整版本: 拜 新 年 TO：论坛朋友们蛇年大吉！