花简静 发表于 2025-8-22 21:44:19

【云荷九周年庆典】潮汐

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 81px);width: clamp(600px, 90vw, 1700px); height: auto;--bg: #000 url('https://642303.freep.cn/642303/tu/20250822cxyh.webp') no-repeat 30% 20%/100% 100%; --ma-size: 6%; --opacity: 1; }
        #pa::before { position: absolute; content: ''; inset: 0; background: url('https://642303.freep.cn/642303/za/feiniao.gif') no-repeat 20% 20%/30% 30%; opacity: var(--opacity); transition: 1.2s; }
        #btnFs { bottom: 30px; color: #eee; }
        #ma {right:20%;top:60%;opacity: .6;
}
        #lrc { right: 40px; top: 40px; color: #333; letter-spacing: 4px; writing-mode: vertical-lr; }
        #lrc::before { width: 100%; height: 0; background: url('https://642303.freep.cn/642303/za/xiaobo3_133581705927067500.png') center; background-clip: text; }
        @keyframes cover1 { from { height: 0; }to { height: 100%; } }
        @keyframes cover2 { from { height: 0; }to { height: 100%; } }
        .pd-vid {
      -mask: linear-gradient(to bottom,transparent,red);
    -webkit-mask: linear-gradient(to bottom,transparent,red);
    opacity: .1;
    transform: rotateY(0deg);
    mix-blend-mode: hard-light;
}
</style>

<div id="pa">
        <audio id="audio" src="https://music.163.com/song/media/outer/url?id=404784312" autoplay loop></audio>
        <video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/23/09/15/19/06/52/video65043accaa003.mp4" autoplay loop muted></video>
        <svg id="ma" class="hue-rotate" viewbox="0 0 400 400"><title>ALT+X</title></svg>
</div>

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

        var geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        const dr = Dr.dr(ma);
        var path = 'M60 60 A100 100 0 0 1 160 160', tt = 30;
        Array.from({length: tt}).forEach((_, k) => {
                dr.path( path, 'none', '#D2B48C', 8, 'round').transform(`rotate(${360 / tt * k}, 200, 200)` );
        });
audio.onplaying = audio.onpause = () => pa.style.setProperty('--opacity', audio.paused ? '0' : '1');
        FS(pa, ma);
        lrc(pa, geci);
</script>

歌曲：潮汐<br>
演唱：齐浠儿
<BR><BR>

花简静 发表于 2025-8-22 21:46:23

贺云荷九周年生日快乐{:1_155:}

欧阳风刀 发表于 2025-8-22 21:58:02

没有浓烈的色彩争艳，反是这份低调的色系最动人。

欧阳风刀 发表于 2025-8-22 21:59:15

光影的处理，码字的组织，歌词的同步，皆精彩！稀罕！

欧阳风刀 发表于 2025-8-22 21:59:46

感谢简静支持！周末愉快！{:1_155:}

圊圊淥詶 发表于 2025-8-23 11:27:36

问好静静，美图~~
很浪漫，也很神秘，
全局暗色，突出了中心的光影效果，
处理的完美，突出了主题了，
而且让人看着又多了一份神秘感~~

圊圊淥詶 发表于 2025-8-23 11:29:31

文字的排版真好看，
配上特效的播放器标志这位点缀，
更成了视觉的焦点，
很棒~~

圊圊淥詶 发表于 2025-8-23 11:31:33

很喜欢人物的剪影和光影效果，
加入的纹理杂质都处理得非常精致，
这些细节增加了画面的丰富性，
也体现了静静对光影效果的掌控很熟哈~~
{:S15:}

圊圊淥詶 发表于 2025-8-23 11:32:15

谢谢静静的分享辛苦了，谢谢你支持活动，
美图，绿洲欣赏学习~~

绿蔷薇 发表于 2025-8-23 14:40:33

{:S15:}哇，好美，满满的高级感跃然纸上~~~~
页: [1] 2
查看完整版本: 【云荷九周年庆典】潮汐