花飞飞 发表于 2025-9-7 22:02

【黑师代码】无问西东（学习黑师20250907《Anger》大奔小播效果）


<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px;margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/9;--bg: url('https://642303.freep.cn/642303/tu/20250907wsxd.webp') no-repeat center/cover; --ma-size: 6%; }
        #btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
        #prog { position: absolute; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(83deg) opacity(.6); }
        #ma { right: 0.7%; bottom: 5%; border-radius: 50%; }
        #lrc { right: 1%; top: 36%; color: #333;font-size: 24px; font-weight: bold;letter-spacing: 4px; writing-mode: vertical-lr; }
    #lrc::before { width: 100%; height: 0; background: url('https://642303.freep.cn/642303/tu/20250907ydsr.webp') center; background-clip: text; }
    @keyframes cover1 { from { height: 0; }to { height: 100%; } }
    @keyframes cover2 { from { height: 0; }to { height: 100%; } }
        .vid { mixed-blend-mode: screen; webkit-mask: radial-gradient(transparent 20%, red);
    -webkit-mask: radial-gradient(transparent 20%, red);   
    opacity: .60;
    transform: rotateY(0deg);
    mix-blend-mode: hard-light; transform: rotateY(0deg);}
        #msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
        @keyframes move { to { stroke-dashoffset: 0; } }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=528478901" autoplay loop></audio>
        <video class="vid pd-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/13/00/18/video63649c6292566.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma" class="opacity">
                <svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
        </div>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
        import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';

    var geci= [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

        var dr = Dr.dr(msvg);
        dr.circle(0, 0, 80, 'none', '#fff', 10).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
        dr.line(3, 0, 70, 0, '#eee', 10).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});

        aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
        prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;

        FS(pa, ma);
        lrc(pa, geci);
</script>

花飞飞 发表于 2025-9-7 22:03

@马黑黑 再交一份，今天的作业。。{:4_173:}

马黑黑 发表于 2025-9-7 22:46

花飞飞 发表于 2025-9-7 22:03
@马黑黑 再交一份，今天的作业。。

双份呀得拿双百分

马黑黑 发表于 2025-9-7 22:47

这个是美得不可方物了

红影 发表于 2025-9-7 23:03

这小播设置得大小适宜，和背景结合得如此巧妙，太赞了{:4_199:}

红影 发表于 2025-9-7 23:07

歌词同步的效果也很漂亮，图片中的留白拓展了豁达的韵味，和歌曲意境十分相符{:4_199:}

花飞飞 发表于 2025-9-8 18:19

马黑黑 发表于 2025-9-7 22:46
双份呀得拿双百分

做得顺手就又整一个{:4_173:}

花飞飞 发表于 2025-9-8 18:19

马黑黑 发表于 2025-9-7 22:47
这个是美得不可方物了

美到心里去了。

花飞飞 发表于 2025-9-8 18:20

红影 发表于 2025-9-7 23:03
这小播设置得大小适宜，和背景结合得如此巧妙，太赞了

根据画面需要来放，问好影子{:4_187:}

花飞飞 发表于 2025-9-8 18:20

红影 发表于 2025-9-7 23:07
歌词同步的效果也很漂亮，图片中的留白拓展了豁达的韵味，和歌曲意境十分相符

天后的歌很好听的。{:4_187:}

马黑黑 发表于 2025-9-8 19:19

花飞飞 发表于 2025-9-8 18:19
美到心里去了。

人美心更美

马黑黑 发表于 2025-9-8 19:19

花飞飞 发表于 2025-9-8 18:19
做得顺手就又整一个

好事成双

花飞飞 发表于 2025-9-8 20:31

马黑黑 发表于 2025-9-8 19:19
人美心更美

人美容易看到，心美也有了。。今天画的心就挺美的{:4_173:}

花飞飞 发表于 2025-9-8 20:32

马黑黑 发表于 2025-9-8 19:19
好事成双

必须的，刚发现网站恢复了正常，不知道最后是怎么处理的。。{:4_170:}

红影 发表于 2025-9-8 23:27

花飞飞 发表于 2025-9-8 18:20
天后的歌很好听的。

是的，韵味十分浓郁，好听{:4_187:}

红影 发表于 2025-9-8 23:28

花飞飞 发表于 2025-9-8 18:20
根据画面需要来放，问好影子

飞飞的运用十分灵活而又得当，很赞的{:4_187:}

马黑黑 发表于 2025-9-9 08:23

花飞飞 发表于 2025-9-8 20:32
必须的，刚发现网站恢复了正常，不知道最后是怎么处理的。。

问题不彻底解决，还会有问题的

马黑黑 发表于 2025-9-9 08:24

花飞飞 发表于 2025-9-8 20:31
人美容易看到，心美也有了。。今天画的心就挺美的

全了

花飞飞 发表于 2025-9-9 19:28

红影 发表于 2025-9-8 23:27
是的，韵味十分浓郁，好听

喜欢天后唱得歌，空灵

花飞飞 发表于 2025-9-9 19:28

红影 发表于 2025-9-8 23:28
飞飞的运用十分灵活而又得当，很赞的

{:4_187:}看你的回复最开心了，都是夸我的
页: [1] 2 3 4 5 6 7
查看完整版本: 【黑师代码】无问西东（学习黑师20250907《Anger》大奔小播效果）