花简静 发表于 2025-9-7 22:06:42

【云荷九周年庆典】无问西东

<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:26:18

{:S15:}图图好赞，简静又一美礼哈~~~

绿蔷薇 发表于 2025-9-7 22:31:40

为歌曲《无问西东》量身打造的图图太有感觉了
清冷的色调、恰到好处的光影，还有音乐的韵味都融进画面里了
文字编排错落有致，非常大气，同步歌词制作精准给力~~

绿蔷薇 发表于 2025-9-7 22:33:26

喜欢简静对音画主题完美的诠释，看着图仿佛都能听到歌里的故事~~~{:5_130:}

绿蔷薇 发表于 2025-9-7 22:33:54

谢谢简静，制作辛苦，么么哒~~~{:6_172:}

游侠 发表于 7 天前

欣赏精彩 排字很棒

紫雨琦琦 发表于 7 天前

◠‿◠好棒的技术，独特的设计，稀罕:victory:

欧阳风刀 发表于 7 天前

冷色调的意境，唯美之极，光影和文字排版大气又高级。

欧阳风刀 发表于 7 天前

音乐元素运用也很是精彩。欣赏精彩。{:7_194:}

欧阳风刀 发表于 7 天前

感谢简静支持！问好！{:1_155:}
页: [1] 2
查看完整版本: 【云荷九周年庆典】无问西东