花飞飞 发表于 2025-9-28 12:23

2025双节庆中秋国庆（学习黑师20250921《黑暗时分》艳丽小播效果）

<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; aspect-ratio: 17/12;--bg: #ccc url('https://642303.freep.cn/642303/tu/20250928zqgq2025.webp') no-repeat center/cover; }
        #progress { position: absolute; top:36%;right:20%;width: 6vw; height: 6vw; transition: .4s; }
        #prog, #track { fill: none; stroke: url(#lGrd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke: lightblue; stroke-opacity: .4; }
        #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
        #btnFs { bottom: 20px; color:         IndianRed; border-color: currentColor!important; }
        .qk-vid { position: absolute; mix-blend-mode: screen;opacity: .55;width:110%; height:110%;left:00%;bottom:-20%;   -webkit-mask: radial-gradient(circle, transparent, transparent,transparent,transparent,transparent,silver, silver,silver,lightgreen, transparent, transparent, transparent, transparent);pointer-events: none; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2051493350" autoplay loop></audio>
        <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/02/57/11/video63640f077eb9c.mp4" autoplay loop muted></video>
        <svg id="progress" class="hue-rotate" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <defs>
                        <linearGradient id="lGrd" gradientTransform="rotate(30)">
                                <stop offset="5%" stop-color="gold" />
                                <stop offset="95%" stop-color="red" />
                        </linearGradient>
                </defs>
                <g id="g1" class="brightness"><title>ALT+X</title></g>
                <g id="g2"><title>调节进度</title></g>
        </svg>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';

        var dr = Dr.dr(progress);
        dr.ellipse(0, 0, 140, 70,'transparent','url(#lGrd)',10).addTo(g1).rotates(5,180);
        dr.circle(0,0,180).id('track').addTo(g2);
        dr.circle(0,0,180).id('prog').addTo(g2);

        FS(pa, g1);
</script>

花飞飞 发表于 2025-9-28 12:24

@马黑黑 双节到了，交一份节日作业{:4_173:}

马黑黑 发表于 2025-9-28 12:27

喜庆祥和，圆圆满满。感谢花飞飞精美绝伦的创作！

梦江南 发表于 2025-9-28 13:32

非常大气，构思巧妙。太棒了！{:4_187:}

梦油 发表于 2025-9-28 14:25

祝花飞飞双节快乐！

樵歌 发表于 2025-9-28 20:52

气势恢宏，闪闪发光！这场面热烈喜庆！

樵歌 发表于 2025-9-28 20:52

问好{:4_204:} 双节快乐！

小辣椒 发表于 2025-9-28 22:43

飞飞这个图图做的有气势，祝飞飞双节快乐！{:4_171:}

小辣椒 发表于 2025-9-28 22:44

背景图颜色和播放器很相配，欣赏飞飞好制作{:4_178:}

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

制作很有气势，也很大气。欣赏飞飞好帖，同祝双节快乐{:4_187:}

姚云裳 发表于 2025-9-29 21:25

这图图很震撼，学习
页: [1]
查看完整版本: 2025双节庆中秋国庆（学习黑师20250921《黑暗时分》艳丽小播效果）