论坛 › 音乐沙龙 › 《无名的人》祝大家五一节快乐

红影 发表于 2025-5-1 23:42

《无名的人》祝大家五一节快乐

<style>
        @import 'https://638183.freep.cn/638183/web/ku/hc_player3in1.css';
        #papa { margin: 140px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/9; background: #000 url('https://pic1.imgdb.cn/item/681391f458cb8da5c8d63cc4.jpg') no-repeat center/cover; animation: flashing 1.2s linear infinite alternate var(--state); }
        #lrcDiv { bottom: 22%;font: bold 3.3em STLiti; color: #fcedbb; --bg: url("https://pic.imgdb.cn/item/67417193d29ded1a8cc27334.jpg"); z-index: 2; }
        .pvid { position: absolute; width: 100%; height: 100%; opacity: .6; object-fit: cover; pointer-events: none; mask: linear-gradient(to bottom, transparent 20%, transparent, red); -webKit-mask: linear-gradient(to bottom, transparent 20%, transparent, red);}
        #mplayer { bottom:40px; left: 35%;--track: gold;--prog: cyan;}
        #fsbtn { top: 30px; color: red; border-color: red;}
        .pTitle {
    width: 60%;
    height: 50%;
    line-height: 2em;
    color: transparent;
    font-family: STLiti, NSimSun, 'Microsoft YaHei';
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin: auto;
    z-index: 10;
    position: absolute;
    left: 19%;
    top: 28%;
}
.sp { animation: flashTitle 6s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s; }
.pTitle span:nth-child(2) { animation-delay: 0.5s; }
.pTitle span:nth-child(3) { animation-delay: 1.0s; }
.pTitle span:nth-child(4) { animation-delay: 1.5s; }
.pTitle span:nth-child(5) { animation-delay: 2.0s; }
.pTitle span:nth-child(6) { animation-delay: 2.5s; }
.pTitle span:nth-child(7) { animation-delay: 3.0s; }
.pTitle span:nth-child(8) { animation-delay: 3.5s; }
.pTitle span:nth-child(9) { animation-delay: 4.0s; }

@keyframes flashTitle {

    0%,
    100% {
      color: white;
      text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange, 2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange, 2px 2px 80px coral;
    }

    50%,
    90% {
      color: transparent;
      text-shadow: none;
    }
}
        @keyframes flashing {
                0% { filter: brightness(.8); }
                100% { filter: brightness(1.2); }
        }
</style>
<div id="papa" class="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2653125161.mp3" autoplay loop></audio>
        <video class="pvid" src="https://img.tukuppt.com/video_show/15653652/01/26/50/625150c82efe5_10s_big.mp4" autoplay loop muted></video>
        <div class="pTitle">
      <span class="sp">祝</span>
      <span class="sp">大</span>
      <span class="sp">家</span>
      <span class="sp">五</span>
      <span class="sp">一</span>
      <span class="sp">节</span>
      <span class="sp">快</span>
      <span class="sp">乐</span>
</div>
</div>
<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hc_player3in1.js';
        import { h5lz } from 'https://638183.freep.cn/638183/web/ku/h5lz.js';
       
        var lzConfig = {
                papa: '#papa',
                total: 20,
                size: {width: 60, height: 60},
                shape: {background: 'url("https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/105.gif")', borderRadius: '0'},
                ani: 'toBottom',
                maxTime: 40,
                offset: {x: -200, y: -200}
        };
        h5lz(lzConfig);
        var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
hcplay(papa, geci );
fscreen.fs(pa, fsbtn);
</script>

红影 发表于 2025-5-1 23:43

终于在今天把帖子弄出来了，为了省力，粒子花朵直接用了论坛表情的花朵{:4_173:}
祝大家五一快乐{:4_187:}

红影 发表于 2025-5-1 23:48

歌词的制作也很方便，先用黑黑给的方法找到原始歌词
https://music.163.com/api/song/media/?id=2653125161
然后用黑黑给的歌词整理方式做歌词整理
http://mhh.52qingyin.cn/api/mplayer/lrcorganizing.html
再然后把整理好的歌词拿到花潮lrc在线增强版进行转换，转换好后微调一下，完活
https://www.huachaowang.com/forum.php?mod=viewthread&tid=63319

谢谢黑黑的代码和花潮歌词的制作方法，这法子特别方便查找歌词和进行转换@马黑黑 {:4_199:}

红影 发表于 2025-5-1 23:50

无名的人啊 我敬你一杯酒
敬你的沉默 和每一声怒吼
敬你弯着腰 上山往高处走
头顶 苍穹 努力地生活

很多劳动者也许是无名之人，却同样创造着伟大的壮举。在劳动节的特殊日子，向所有劳动者致敬。{:4_204:}

红影 发表于 2025-5-1 23:51

来不及回复提醒了，去睡觉了。即使放假可以使劲玩，也真的太晚了{:4_173:}

庶民 发表于 2025-5-2 07:24

祝亲爱的朋友们，节日快乐，赞一个！

梦江南 发表于 2025-5-2 08:42

欣赏影子的精彩音画，辛苦了！{:4_187:}

梦江南 发表于 2025-5-2 08:45

借影子的帖子把美好的祝福，送给花潮论坛的网友们！五一节快乐！{:4_187:}

梦油 发表于 2025-5-2 09:16

本帖最后由 梦油 于 2025-5-2 09:18 编辑

                  祝全世界劳动者节日快乐
                   祝花潮朋友们节日快乐
                  祝影子朋友节日快乐
                                              https://img0.baidu.com/it/u=471285630,1859719601&fm=253&fmt=auto&app=138&f=GIF?w=285&h=190

红影 发表于 2025-5-2 10:27

庶民 发表于 2025-5-2 07:24
祝亲爱的朋友们，节日快乐，赞一个！

也祝庶民节日快乐{:4_187:}

红影 发表于 2025-5-2 10:29

梦江南 发表于 2025-5-2 08:42
欣赏影子的精彩音画，辛苦了！

谢谢江南鼓励，做这个才发现找歌词和转化歌词十分方便呢{:4_173:}

红影 发表于 2025-5-2 10:29

梦江南 发表于 2025-5-2 08:45
借影子的帖子把美好的祝福，送给花潮论坛的网友们！五一节快乐！

谢谢江南，也祝福您节日快乐{:4_187:}

红影 发表于 2025-5-2 10:30

梦油 发表于 2025-5-2 09:16
祝全世界劳动者节日快乐
                   祝花潮朋友们节日快乐
                  ...

谢谢梦油，节日快乐{:4_187:}

小辣椒 发表于 2025-5-2 13:12

亲爱的，大气的背景制作，歌词图片颜色配的漂亮{:4_199:}

小辣椒 发表于 2025-5-2 13:13

借美帖，祝大家五一节快乐！{:4_204:}{:4_177:}

小辣椒 发表于 2025-5-2 13:14

花朵粒子特别漂亮，创意特别赞！{:4_178:}

红影 发表于 2025-5-2 15:26

小辣椒 发表于 2025-5-2 13:12
亲爱的，大气的背景制作，歌词图片颜色配的漂亮

歌词和粒子的背景都试着换成了图片背景{:4_173:}

红影 发表于 2025-5-2 15:26

小辣椒 发表于 2025-5-2 13:13
借美帖，祝大家五一节快乐！

亲爱的节日快乐{:4_187:}

红影 发表于 2025-5-2 15:27

小辣椒 发表于 2025-5-2 13:14
花朵粒子特别漂亮，创意特别赞！

想找个花朵，正好想起花潮的表情里就有花朵，然后直接就用了，又省力又好看{:4_173:}

马黑黑 发表于 2025-5-2 19:42

红影 发表于 2025-5-1 23:48
歌词的制作也很方便，先用黑黑给的方法找到原始歌词
https://music.163.com/api/song/media/?id=265312516 ...

这套方法应该是全套了吧{:4_170:}

查看完整版本: 《无名的人》祝大家五一节快乐