小辣椒 发表于 2025-10-4 20:45

【月满花潮庆华诞】花好月圆夜 TO：老头中秋节快乐！


<style>
    @import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
    #pa { --offsetX: 81px; margin: 130px 0 20px calc(50% - 375px); --bg: url('https://wj.zp68.com/lxx/yunhua/2025/09/21/40.jpg ') no-repeat center/cover; --ma-size: 200px; }
    #btnFs { bottom: -120px; color: #eee; }
    #mwrap { position: absolute; left: 64%; bottom: 52%; width: 300px; height: 300px; }
    #ma { left: 100px; bottom: 90px; display: grid; place-items: center; }
    #ma::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: cyan; }
#dt2{ position: absolute; width:240px; height: 240px; bottom: 40px; left: 1104px; }

    .son { position: absolute; width: 100%; height: 1px; background: linear-gradient(to right, var(--bg1), var(--bg2)); transform: rotate(var(--a)); display: grid; place-items: center; }
    .son::before, .son::after { content: ''; position: absolute; width: 24px; height: 24px; background: inherit; border-radius: 50%; left: 0; }
    .son::after { left: calc(100% - 20px); }
    .ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }

#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 40%; bottom: 40px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }       
    @keyframes flash { to { color: red; opacity: .7; } }
</style>

<div id="pa">
   <img id="dt2" src="https://wj1.zp68.com:812/lxx/yunhua/2025/01/26/lt.gif" alt="" />
    <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2025/09/21/01.mp3" autoplay loop></audio>
    <video class="pd-vid" src="https://video-qn.51miz.com/preview/video/00/00/15/18/V-151809-637CF87A.mp4" autoplay loop muted></video>
    <div id="mwrap">
      <div id="ma" class="brightness"></div>
    </div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';   
    import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [['0.02', '花好月圆夜',4.09],
['4.33', '演唱：杨千嬅/任贤齐',2.83],
['7.31', '帖赠老头中秋节快乐！',6.19],
['13.67', 'Lrc编辑：小辣椒',5.13],
['19.28', '春风吹呀吹',2.35],
['21.75', '吹入我心扉',2.39],
['24.27', '想念你的心',2.38],
['26.78', '怦怦跳不能入睡',2.37],
['29.27', '为何你呀你',2.39],
['31.79', '不懂落花的有意',2.34],
['34.25', '只能望着窗外的明月',5.05],
['39.57', '月儿高高挂',2.23],
['41.92', '弯弯的像你的眉',2.38],
['44.43', '想念你的心',2.29],
['46.84', '只许前进不许退',2.47],
['49.44', '我说你呀你',2.39],
['51.96', '可知流水非无情',2.43],
['54.52', '载你飘向天上的宫阙',4.48],
['59.24', '就在这花好月圆夜',2.76],
['62.15', '两心相爱心相悦',2.42],
['64.70', '在这花好月圆夜',2.34],
['67.16', '有情人儿成双对',2.42],
['69.71', '我说你呀你这世上还有谁',4.81],
['74.77', '能与你鸳鸯戏水',4.25],
['79.24', '比翼双双飞',5.98],
['85.54', '明月几时有把酒问青天',9.98],
['96.05', '不知天上宫阙',4.33],
['100.61', '今夕是何年',4.06],
['104.88', '就在这花好月圆夜',2.61],
['107.63', '两心相爱心相悦',2.38],
['110.13', '在这花好月圆夜',2.43],
['112.69', '有情人儿成双对',2.38],
['115.20', '我说你呀你这世上还有谁',4.85],
['120.31', '能与你鸳鸯戏水',4.08],
['124.61', '比翼双双飞',3.76],
['129.57', '谢谢欣赏',4.5]
];       
       
               lrc(pa, geci)

    FS(pa, ma);

    var txtAr = '中秋节快乐'.split(''), spans = [], total = 7;

    txtAr.forEach( (t, k) => {
      var s = document.createElement('span');
      s.textContent = t;
      s.className = k === 0 ? 'title-text ani' : 'title-text';
      var a = -180 / (txtAr.length - 1) * k - 180, r = 170;
      s.style.cssText += `
            left: ${r + r * Math.cos(a * Math.PI / 180)}px;
            top: ${r + r * Math.sin(a * Math.PI / 180)}px;
      `;
      spans.push(s);
      s.onanimationend = () => {
            s.classList.remove('ani');
            spans[(k + 1) % txtAr.length].classList.add('ani');
      };
      mwrap.appendChild(s);
    });

    Array.from({length: total}).forEach( (son, key) => {
      son = document.createElement('div');
      son.className = 'son';
      son.style.cssText += `
            --bg1: #${Math.random().toString(16).substring(2, 8)};
            --bg2: #${Math.random().toString(16).substring(2, 8)};
            --a: ${key * 180 / total}deg;
      `;
      ma.appendChild(son);
    });

</script>

小辣椒 发表于 2025-10-4 20:47

@东篱闲人

老头你太忙了，前面送你的礼都不收，是嫌弃吧，小辣椒继续送，{:4_170:}

小辣椒 发表于 2025-10-4 20:48

祝老头中秋节快乐！我给你后宫三千里面请出来一个，陪你过中秋{:4_205:}

小辣椒 发表于 2025-10-4 20:49

祝福老头双节快乐！{:4_191:}{:4_176:}{:4_177:}

梦油 发表于 2025-10-4 21:13

祝小辣椒和东篱中秋快乐

小辣椒 发表于 2025-10-4 21:17

梦油 发表于 2025-10-4 21:13
祝小辣椒和东篱中秋快乐

谢谢梦油，中秋节快乐！{:4_187:}

红影 发表于 2025-10-4 21:19

这个有趣，还有东篱大哥坐着摇椅的动态图呢，真自在啊。
欣赏亲爱的好帖，东篱大哥收礼开心{:4_199:}

樵歌 发表于 2025-10-4 21:31

最喜欢小辣椒做的小动图图了。{:4_205:}

樵歌 发表于 2025-10-4 21:32

漂亮的礼物在这冷放着令人眼馋吖

樵歌 发表于 2025-10-4 21:34

小辣椒 发表于 2025-10-4 20:47
@东篱闲人

老头你太忙了，前面送你的礼都不收，是嫌弃吧，小辣椒继续送，

人家中秋节一家子好几千人要团圆吖，够他忙活一阵子了{:4_170:}

小辣椒 发表于 2025-10-4 21:36

红影 发表于 2025-10-4 21:19
这个有趣，还有东篱大哥坐着摇椅的动态图呢，真自在啊。
欣赏亲爱的好帖，东篱大哥收礼开心

亲爱的，老头搞失踪，我都很久没有看见他了，上次的礼都没有收{:4_198:}

小辣椒 发表于 2025-10-4 21:37

樵歌 发表于 2025-10-4 21:31
最喜欢小辣椒做的小动图图了。

樵哥哥，这个老头的动图是老头自己做的{:4_170:}

小辣椒 发表于 2025-10-4 21:37

樵歌 发表于 2025-10-4 21:32
漂亮的礼物在这冷放着令人眼馋吖

老头忙了国节去了，我都很久没有看见他了

小辣椒 发表于 2025-10-4 21:38

樵歌 发表于 2025-10-4 21:34
人家中秋节一家子好几千人要团圆吖，够他忙活一阵子了

哈哈，那就等他忙完了再来收礼了

偶然~ 发表于 2025-10-5 12:05

唯美的音画

偶然~ 发表于 2025-10-5 12:05

中秋氛围满满

偶然~ 发表于 2025-10-5 12:06

大气的制作

偶然~ 发表于 2025-10-5 12:06

感谢小辣椒带来的精彩，辛苦了！祝你国庆中秋快乐、阖家幸福！

梦油 发表于 2025-10-5 14:03

小辣椒 发表于 2025-10-4 21:17
谢谢梦油，中秋节快乐！

小辣椒朋友不客气。

梦江南 发表于 2025-10-5 14:21

好漂亮的图图，东篱老师收礼开心哦！{:4_187:}
页: [1] 2
查看完整版本: 【月满花潮庆华诞】花好月圆夜 TO：老头中秋节快乐！