论坛 › 欢乐水吧 › 正月十五看烟火闹元宵（学习黑黑老师代码帖）

梦江南 发表于 2025-2-12 07:59

正月十五看烟火闹元宵（学习黑黑老师代码帖）

<style>
    #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1080px; height:680px; background: url('https://pic1.imgdb.cn/item/67a4024ed0e0a243d4fc0be1.gif') no-repeat center/cover; box-shadow: 2px 2px 6px rgba(0,0,0,.6); overflow: hidden; z-index: 1; position: relative; }
    txt-box { position: absolute; display: grid; place-items: center; left: var(--xx); bottom: 10px; width: 50px; height: 50px; font: normal 30px sans-serif; color: snow; cursor: pointer; transition: .5s; animation: move 5s var(--delay) linear infinite alternate var(--state); }
    txt-box::after { position: absolute; content: ''; inset: -4px; border: thick outset lightgreen; border-radius: 0 50%; animation: rot 5s var(--delay) linear infinite alternate var(--state); }
    txt-box:hover { filter: sepia(100%) drop-shadow(0 -80px 10px white); }
    #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: multiply; opacity: .60; pointer-events: none; }
    @keyframes move { to { bottom: 150px; } }
    @keyframes rot { to { transform: rotateX(360deg); } }
</style>

<div id="mydiv">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2128247585.mp3" autoplay loop></audio>
    <video id="vid" src="https://cccimg.com/view.php/464305b56c366a93439bb83e14421a4b.mp4" muted loop autoplay></video>
</div>

<script>
(function() {
    const ar = '正月十五看烟火闹元宵'.split('');
    const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
    let tbAr = [];
    ar.forEach((t,k) => {
      let tbox = document.createElement('txt-box');
      tbox.textContent = t;
      tbox.style.cssText += `
            --xx: ${ww / total * k + 180}px;
            --delay: -${k < half ? k * 0.5 : (total - k) * 0.5}s;
      `;
      tbAr.push(tbox);
      mydiv.appendChild(tbox);
    });
    aud.onplaying = aud.onpause = () => {
      mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
      aud.paused ? vid.pause() : vid.play();
      tbAr.forEach(tb => tb.title = ['暂停','播放'][+aud.paused]);
    };
    tbAr.forEach(tb => tb.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>

梦江南 发表于 2025-2-12 08:00

https://pic1.imgdb.cn/item/67abdf95d0e0a243d4fe783f.gif

https://pic1.imgdb.cn/item/67abe480d0e0a243d4fe786e.gif

梦油 发表于 2025-2-12 09:00

祝梦江南和朋友们元宵节快乐！

起个网名好难 发表于 2025-2-12 09:19

<meta name="referrer" content="never" >

<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/AiatPyc4VpoFTLiavf0PPCBZXrYTyX0YAG0GamDds11eNicjCC0AsqWMLUIehHz60NKjIhX6E0EjEMnT0I6DnyU3Q/640" width="400" />

梦江南 发表于 2025-2-12 09:41

梦油 发表于 2025-2-12 09:00
祝梦江南和朋友们元宵节快乐！

谢谢梦油老师，元宵节同乐！

梦江南 发表于 2025-2-12 10:04

起个网名好难 发表于 2025-2-12 09:19


这么漂亮的美女是Al做出来的。元宵节快乐！

红影 发表于 2025-2-12 16:43

欢欢喜喜的元宵祝福帖子，欣赏江南好帖，元宵节快乐{:4_199:}{:4_177:}

梦江南 发表于 2025-2-12 16:52

红影 发表于 2025-2-12 16:43
欢欢喜喜的元宵祝福帖子，欣赏江南好帖，元宵节快乐

问好影子，谢谢支持，祝元宵节快乐！

https://img4.oldkids.cn/upload/2025/02/12/mb_0_20250212030617945.jpg

梦油 发表于 2025-2-12 16:56

梦江南 发表于 2025-2-12 09:41
谢谢梦油老师，元宵节同乐！

谢谢你的美好祝福。

杨帆 发表于 2025-2-12 17:07

谢谢美好祝福，同祝梦江南元宵节快乐{:4_204:}

梦江南 发表于 2025-2-12 17:19

梦油 发表于 2025-2-12 16:56
谢谢你的美好祝福。

https://img4.oldkids.cn/upload/2025/02/11/blog_260865805_20250211115046527.gif

梦江南 发表于 2025-2-12 17:21

杨帆 发表于 2025-2-12 17:07
谢谢美好祝福，同祝梦江南元宵节快乐

问好杨帆，谢谢支持，同庆元宵节快乐！
https://img4.oldkids.cn/upload/2025/02/11/blog_260865805_20250211115046527.gif

红影 发表于 2025-2-12 18:06

梦江南 发表于 2025-2-12 16:52
问好影子，谢谢支持，祝元宵节快乐！

好可爱的图图啊，问好江南，一起节日快乐{:4_187:}

梦江南 发表于 2025-2-12 20:10

来者，一起同庆元宵快乐

梦油 发表于 2025-2-13 10:29

梦江南 发表于 2025-2-12 17:19


好美的动图。

小文 发表于 2025-2-13 10:39

不错的制作

梦江南 发表于 2025-2-13 14:10

梦油 发表于 2025-2-13 10:29
好美的动图。

谢谢，问好梦油老师。

梦江南 发表于 2025-2-13 14:11

小文 发表于 2025-2-13 10:39
不错的制作

谢谢小文老师，谢谢，同庆元宵节！{:4_204:}

梦油 发表于 2025-2-13 14:20

梦江南 发表于 2025-2-13 14:10
谢谢，问好梦油老师。

梦江南朋友真讲礼貌。{:5_116:}

小辣椒 发表于 2025-2-13 15:55

阿姨这个带字效果用这里效果挺好{:4_199:}

查看完整版本: 正月十五看烟火闹元宵（学习黑黑老师代码帖）