论坛 › 动画音画 › 【黑师代码】止于你（学习黑师20250329《DOOOO》三合一横版歌词效果）

花飞飞 发表于 2025-3-30 09:55

【黑师代码】止于你（学习黑师20250329《DOOOO》三合一横版歌词效果）

本帖最后由 花飞飞 于 2025-3-31 18:27 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
        #tz {margin: 130px 0 30px calc(50% - 931px);width: 1700px;height: 1100px;background: #000 url('https://642303.freep.cn/642303/tu/20250329zyn03.webp') no-repeat center/cover;overflow: hidden; }
        #mplayer { --track: #bdb6cb;--prog: #6d719f;--prg: 0%;bottom: 30px; }
        #fsbtn { top: 40px;color:#6d719f; border-color:#6d719f; }
        #lrcDiv {bottom: 8%;color: #6d719f; --hlcolor: #bdb6cb;
}
        .vid {
    width: 100%;
    height: 130%;
    bottom:0px;
    opacity: .66;
    -webkit-mask: linear-gradient(to bottom,transparent,transparent,red);
    mix-blend-mode: overlay;
}
.mypic {
    position: absolute;
    right:360px;
    top:230px;
    cursor: pointer;
    mix-blend-mode: luminosity;
    z-index: 3;
   pointer-events: none;
}
</style>

<div id="tz" class="pa">
        <video class="vid" src="https://video.699pic.com/videos/93/03/32/c7UiktREpYm71513930332.mp4" autoplay loop></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1339725072" autoplay loop></audio>
        <div class="mypic"><img src="http://qslt.net/data/attachment/forum/202412/22/185517gclz9lzqcokzqcuz.gif" alt="" /></div>
</div>

<script type="module">
        import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
        var gc = `
        单曲：止于你
        歌手：潘悦晨
        所属专辑：止于你
        作词 : 森林
        作曲 : 曹秦
        编曲吉他：卢骏康
        学习黑师20250329《DOOOO》三合一横版歌词效果
        四月的新绿晕开我所有柔情
        房子般的心
        无人知晓的欢愉
        我将这心事藏在远行春风里
        无声又无息
        恰到好处的思意
        云止于雾气缥缈散去的神秘
        光止于细雨落地微带着寒意
        雪止于星辰碎片洒落在天际
        万物就化作欢喜溢满我眼底
        我止于你如春阳温暖我年少
        微风轻轻起
        你一笑就足矣
        乍暖的朝夕盛满我所有温情
        似波澜不惊
        内心翻天覆地
        我将这心事藏在每天晚安里
        思绪般的谜
        遥不可及的归期
        云止于雾气缥缈散去的神秘
        光止于细雨落地微带着寒意
        雪止于星辰碎片洒落在天际
        万物就化作欢喜溢满我眼底
        我止于你如春阳温暖我年少
        微风轻轻起
        你一笑就足矣
        微风轻轻起
        你一笑就足矣
        混音：李浩纶
        制作人：李浩纶
        发行公司：杭州回声文化艺术策划有限公司
`;
        hcplay(tz,gc,3);
        flower.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

花飞飞 发表于 2025-3-30 09:56

@马黑黑 交一份三合一的横版歌词作业。。
关于播放器和歌词还有全屏按纽颜色的配置，我只用了两种与背景相近的颜色。。。
三合一功能强大，改起来很方便{:4_173:}

红影 发表于 2025-3-30 13:20

字体设计漂亮，好像有立体感的感觉。歌词和播放器的颜色也设计得十分协调。
这样完美相合的颜色，让人看得赏心悦目，太美了{:4_199:}

红影 发表于 2025-3-30 13:21

欣赏飞飞好帖{:4_199:}

红影 发表于 2025-3-30 13:22

这个就这样看特别完美，不过全屏好像有点问题，让歌词和图片下的文字有些重叠了呢{:4_204:}

红影 发表于 2025-3-30 13:23

这个帖子的颜色设计真的太好了，这样的颜色好像挺不容易调的，被飞飞调得如此熨帖，太赞了{:4_199:}

小九 发表于 2025-3-30 14:47

很大气的制作，色彩单一却让整个画面更有意境，字体设计看起来也非常舒服{:4_199:}{:4_187:}

马黑黑 发表于 2025-3-30 17:40

花飞飞 发表于 2025-3-30 09:56
@马黑黑 交一份三合一的横版歌词作业。。
关于播放器和歌词还有全屏按纽颜色的配置，我只用了两种与背景相 ...

其实需要改的参数越少越方便，但是也越受限

花飞飞 发表于 2025-3-30 21:38

马黑黑 发表于 2025-3-30 17:40
其实需要改的参数越少越方便，但是也越受限

小白通过实践证明，改得参数少好用，
直接就协调统一了，根本不需要费神去配色。。

马黑黑 发表于 2025-3-30 22:34

花飞飞 发表于 2025-3-30 21:38
小白通过实践证明，改得参数少好用，
直接就协调统一了，根本不需要费神去配色。。

有些事情也不能偷懒

清茶煮雪 发表于 2025-3-31 17:04

太惊艳了，图图好美！飞飞你太厉害啦{:4_199:}

清茶煮雪 发表于 2025-3-31 17:08

我是望尘莫及呀！很喜欢这样的色调，图图大气唯美，飞飞好棒，赞赞赞{:4_204:}

花飞飞 发表于 2025-3-31 18:26

红影 发表于 2025-3-30 13:20
字体设计漂亮，好像有立体感的感觉。歌词和播放器的颜色也设计得十分协调。
这样完美相合的颜色，让人看得 ...

{:4_187:}影子给的动力满满，很是开心

花飞飞 发表于 2025-3-31 18:29

红影 发表于 2025-3-30 13:22
这个就这样看特别完美，不过全屏好像有点问题，让歌词和图片下的文字有些重叠了呢

影子提醒得太好了~~
我看有点叠把五行调成三行，
现在把10%改为8%，好象比较合适。。
这样全屏看着舒适多了。。{:4_187:}

花飞飞 发表于 2025-3-31 18:30

红影 发表于 2025-3-30 13:23
这个帖子的颜色设计真的太好了，这样的颜色好像挺不容易调的，被飞飞调得如此熨帖，太赞了

一直想做一个单色的贴子，感觉这个人素比较合适就试了一下，有影子肯定真是太开心了。。{:4_187:}

花飞飞 发表于 2025-3-31 18:30

小九 发表于 2025-3-30 14:47
很大气的制作，色彩单一却让整个画面更有意境，字体设计看起来也非常舒服

有小九支持更开心啦。。。{:4_187:}乐一个

花飞飞 发表于 2025-3-31 18:31

马黑黑 发表于 2025-3-30 22:34
有些事情也不能偷懒

{:4_173:}允许的情况下能偷懒就偷懒

花飞飞 发表于 2025-3-31 18:32

菲儿 发表于 2025-3-31 17:04
太惊艳了，图图好美！飞飞你太厉害啦

问好菲儿，谢谢你的夸奖和支持哈，很暖心

花飞飞 发表于 2025-3-31 18:33

菲儿 发表于 2025-3-31 17:08
我是望尘莫及呀！很喜欢这样的色调，图图大气唯美，飞飞好棒，赞赞赞
你能喜欢我也高兴。。。菲儿一起疯图开心哈{:4_187:}

马黑黑 发表于 2025-3-31 18:36

花飞飞 发表于 2025-3-31 18:31
允许的情况下能偷懒就偷懒

{:4_189:}

查看完整版本: 【黑师代码】止于你（学习黑师20250329《DOOOO》三合一横版歌词效果）