花飞飞 发表于 2025-3-16 12:32

【黑师代码】如果时光可以倒流（学习黑师20250307《燃烧》适应小设备显示效果）

<style>
    @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
    #tz { --bottom: 100%; margin: 130px 0 30px calc(50% - 931px); width: 1700px;height: 900px;background: url('https://642303.freep.cn/642303/tu/20250315rgsg01.webp') no-repeat center/cover; overflow: hidden; }
    #tz:hover { --bottom: 10px; }
    @media screen and (max-width: 1025px) { #tz { transform: scale(.6); } }
    #mplayer { width: 40%; bottom: var(--bottom); background: none; box-shadow: none; color: snow; }
    #mplayer img { filter: invert(.8); }
    #prog {--prog:        #CD5C5C;}
    #fsbtn { bottom: var(--bottom); left: 20px; border-color: snow; color: snow; }
    #lrc {left: 50%;transform: translateX(-50%);bottom: 30px; --bg: linear-gradient(#ffffffaa,         #CD5C5C); color: DimGray;font: bold 1.6em cursive;opacity: .36; }
    .vid { position: absolute; width: 100%; height: 110%; object-fit: cover; top:-80px; mix-blend-mode: screen; pointer-events: none; opacity: .35;}
    video:nth-of-type(2) { opacity: 0.5;left:50%;top:6%;width: 50%; height: 60%;-webkit-mask: radial-gradient(circle,   cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent); }
    #lrc { bottom: 50px; }
</style>

<div id="tz" class="pa">
    <audio src="https://music.163.com/song/media/outer/url?id=35448098"></audio>
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/10/15/video6365fe47a03e2.mp4" autoplay loop muted></video>
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_preview/19/06/03/14/39/19/video5cf4c09793e36.mp4" autoplay loop muted></video>
</div>

<script type="module">
    import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
    var gc= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        hcplay(tz, null, gc);

</script>

花飞飞 发表于 2025-3-16 12:34

@马黑黑 我的图大，把缩放比例改为60%差不多。。。前面调为50%手机看边上还空，就又调大一丢丢。{:4_173:}
这个对手机党很友好啊

花飞飞 发表于 2025-3-16 12:36

图只调了个色，
字是认真排的。。费了不少功夫
音乐是为了排字找个长标题顺手在网易抓的。。后来才知道是男声。。{:4_170:}

马黑黑 发表于 2025-3-16 13:34

花飞飞 发表于 2025-3-16 12:34
@马黑黑 我的图大，把缩放比例改为60%差不多。。。前面调为50%手机看边上还空，就又调大一丢丢。
...

{:5_108:}

红影 发表于 2025-3-16 13:35

两个视频用得很巧妙，正好烘托了画面的意境。
欣赏飞飞好帖{:4_199:}

红影 发表于 2025-3-16 13:35

花飞飞 发表于 2025-3-16 12:36
图只调了个色，
字是认真排的。。费了不少功夫
音乐是为了排字找个长标题顺手在网易抓的。。后来才知道是 ...

这字体设计真匠心，特别漂亮{:4_199:}

花飞飞 发表于 2025-3-16 21:10

马黑黑 发表于 2025-3-16 13:34


这个之前说的要顾及右下角的一些设置，好象不太需要，
主贴缩小后，大家自动跟小了的感觉。。

花飞飞 发表于 2025-3-16 21:11

红影 发表于 2025-3-16 13:35
两个视频用得很巧妙，正好烘托了画面的意境。
欣赏飞飞好帖

{:4_173:}影子夸我的多，看到你回复最开心了

花飞飞 发表于 2025-3-16 21:12

红影 发表于 2025-3-16 13:35
这字体设计真匠心，特别漂亮

字不太会排，整得比做图费劲。{:4_187:}

红影 发表于 2025-3-16 22:31

花飞飞 发表于 2025-3-16 21:11
影子夸我的多，看到你回复最开心了

飞飞的帖子总是亮点多多，我都没夸全啊{:4_173:}

红影 发表于 2025-3-16 22:32

花飞飞 发表于 2025-3-16 21:12
字不太会排，整得比做图费劲。

很协调啊，烘托了画面，和歌词的色彩也很相符，非常赞呢{:4_187:}
页: [1]
查看完整版本: 【黑师代码】如果时光可以倒流（学习黑师20250307《燃烧》适应小设备显示效果）