花简静 发表于 2025-8-13 10:08:28

【云荷九周年庆典】花沉雪 (简静音画)

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 0px; width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9;margin: 150px 0;left: calc(50% - 81px);--bg: url('https://642303.freep.cn/642303/tu/yun003.jpg') no-repeat center/cover; --bg1: lightblue; --state: runnig; transition: 0.5s; --ma-size: 3%; --per: -2%; --a: 45deg; }
        #pa::before { content: ''; position: absolute; inset: 0; background: var(--bg1); mask: linear-gradient(var(--a), red var(--per), transparent calc(var(--per) + 2%), transparent); }
        #ma {left: 22%; top: 30%; background: url('https://642303.freep.cn/642303/za/fl1033.png') no-repeat center/cover;}
        #btnFs { right: 20px; bottom: 20px; }
        .qk-vid { mix-blend-mode:screen; opacity: .75;-webkit-mask: linear-gradient(to bottom,transparent,transparent,red);}
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1836109098" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/20/video63661b5c8b098.mp4" autoplay loop muted></video>
        <div id="ma" class="hue-rotate"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, ma);

        var per = -2, step = 0.5, aniCounter = 0, raf;
        var pics = [
                'https://642303.freep.cn/642303/tu/yun001.jpg',
                'https://642303.freep.cn/642303/tu/yun002.jpg',
                'https://642303.freep.cn/642303/tu/yun003.jpg',
                'https://642303.freep.cn/642303/tu/yun004.jpg',
        ];
        ma.onanimationiteration = () => {
                var angle = aniCounter % 4, picIdx = aniCounter % pics.length;
                pa.style.setProperty('--a', `${180 + (angle * 90)}deg`);
                pa.style.setProperty('--bg1', `url(${pics}) no-repeat center/cover`);
                picIdx = (picIdx + 1) % pics.length;
                aniCounter ++;
                changePic();
        };

        function changePic() {
                if (per > 100) {
                        cancelAnimationFrame(raf);
                        per = -2;
                        var picIdx = aniCounter % pics.length;
                        picIdx = picIdx > 0 ? picIdx - 1: pics.length - 1;
                        pa.style.setProperty('--bg', `url(${pics}) no-repeat center/cover`);
                } else {
                        per += step;
                        pa.style.setProperty('--per', per + '%');
                        raf = requestAnimationFrame(changePic);
                }
        }
</script>

花简静 发表于 2025-8-13 10:09:40

恭祝云荷九周年庆典~{:1_156:}

绿蔷薇 发表于 2025-8-13 10:40:49

撒花花
好美啊
{:4_123:}

浅唱 发表于 2025-8-13 11:55:31

特效加的不错
纷纷扬扬的花瓣增强了意境
欣赏问好

玫の玫 发表于 2025-8-13 12:14:58

欣赏静静美兔兔~
淡蓝水色晕染开，
她撑着翠色花伞，
粉裙缀着碎花。
效果美美哒！{:1_154:}

玫の玫 发表于 2025-8-13 12:16:09

发间银饰轻晃，
似与伞上花影私语，
古意文字旁，
她如从水墨里走出的仙子，
把江南的柔，
都藏进这一伞、一裙、一颦一笑间 。
为静静美作点赞！！{:1_154:}{:1_154:}

玫の玫 发表于 2025-8-13 12:27:01

借静静美作恭祝云荷九周年庆典越来越好！

欧阳风刀 发表于 2025-8-13 16:37:03

{:7_182:}画面很是养眼啊，移不开眼睛的那种，哈哈。

欧阳风刀 发表于 2025-8-13 16:38:20

布局巧妙，背景渲染很是有味儿，标题文字制作精彩，特效吸睛。

欧阳风刀 发表于 2025-8-13 16:39:08

好作品，俺稀罕。感谢简静支持。{:1_155:}
页: [1] 2 3 4
查看完整版本: 【云荷九周年庆典】花沉雪 (简静音画)