醉美水芙蓉 发表于 2025-10-19 09:40:09

花简静音画《我心悄悄》


<style>
        @import 'https://638183.freep.cn/638183/web/css/tz03.css';
        #pa { --offsetX: 0px; margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/12;--bg: #ccc url('https://642303.freep.cn/642303/tu/20251016qs01.webp') no-repeat center/cover; }
        #progress { position: absolute; width: 5vw; height: 5vw; left:16%;top:60%;transition: .4s;opacity: .55; }
        #prog, #track { fill: none; stroke: url(#grd); stroke-width: 16; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; transition: .15s; cursor: pointer; }
        #prog { stroke: rgba(200,200,200,.8); }
        #g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
        #btnFs { right: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
        #mList { min-width: 160px; right: 20px; top: 20px; color: beige; border: 8px ridge beige; border-radius: 12px; background: rgba(157,151,166,.1); opacity: .30;}
        #mList > p { font-size: 18px; }
        #mList > p:hover { font-weight: bold; }
        .hLight { color: yellow; }
        .pd-vid{mix-blend-mode:overlay;width:140%; -webkit-mask: linear-gradient(to bottom,transparent,transparent,transparent,red);opacity: .40;}
</style>

<div id="pa">
        <video class="pd-vid" src="https://video.699pic.com/videos/70/31/61/a_tWJENsz3V5iD1552703161.mp4" autoplay loop muted></video>
        <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <defs>
                        <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
                                <stop offset="0%" stop-color="LightCoral"></stop>
                                <stop offset="50%" stop-color="Wheat"></stop>
                                <stop offset="100" stop-color="Honeydew"></stop>
                        </radialGradient>
                </defs>
                <g id="g1" class="hue-rotate"><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_mulplayer.js';
        import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.1';

        var dr = Dr.dr(progress);
        dr.path('M0 0 C-80 -160,80 -160,0 0').addTo('g1').rotates(7);
        dr.circle(0,0,100,'transparent').addTo('g1');
        dr.path('M0 -180 Q300 0,0 180').id('track').addTo('g2');
        dr.path('M0 -180 Q300 0,0 180').id('prog').addTo('g2');

        var musics = [['32743519', '江上清风游'],['1457489326', '秋雨漫漫'],['1334831069', '水仙雨'],['1828126637', '山泉之水'],['1825317102', '苔痕·尚绿'],['304905', '心游太玄'],['1374481322', '淡淡思绪'],['1334675131', '逃不开夏天'],['1992736898', '森林微雨'],['1824713380', '山间小路']].map(ar => ['https://music.163.com/song/media/outer/url?id=' + ar, ar]);

        FS(pa, g1, musics);
</script>

klxf 发表于 2025-10-19 18:43:18

谢谢醉美管理员精彩分享

醉美水芙蓉 发表于 2025-10-19 19:11:16

klxf 发表于 2025-10-19 18:43
谢谢醉美管理员精彩分享

友友晚上好！

快乐布衣 发表于 2025-10-22 04:11:47

感谢分享，解决我的疑惑啦
页: [1]
查看完整版本: 花简静音画《我心悄悄》