岩新新 发表于 2025-9-28 10:59

童丽-烟花三月下扬州

本帖最后由 岩新新 于 2025-9-28 12:45 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2364984">
<style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://file.uhsea.com/2509/b61fbb1b02af14d19f38555f86912e36CT.png') no-repeat center/cover, linear-gradient(45deg,

#e56420, #c22525, #3d9c31, #37bbde); --ma-size: 30%; animation: hue-rotate 3s linear infinite var(--state); border-radius: 18px; }
        #btnFs { left: 30px; bottom: 20px; color: skyblue; border-color: currentColor!important; }
        #prog { position: absolute; cursor: pointer; opacity: 0.7; bottom: 53%; right: 11%; width: 20%; transform: rotate(-76deg);filter: hue-rotate

(124deg); }
        #ma { bottom: 240px; border-radius:50%; }
        #msvg ellipse { transform-box: fill-box; transform-origin: center; animation: rotate 1s var(--delay) linear infinite var(--state); }
        #lrc { bottom: 30px; font:normal 2.2em Microsoft YaHei; sans-serif; color:#fff;}
        #lrc::before { width: 100%; height: 0; background: url('https://webftp-bbs.hnol.net/yx2021/CR17/bhs.jpg') center; background-clip: text;-webkit-background-clip: text; }
          @keyframes cover1 { from { height: 0; }to { height: 100%; } }
          @keyframes cover2 { from { height: 0; }to { height: 100%; } }
            #dt2{ position: absolute; width:120px; height: 106px; top: 85px; left: 484px; }

          .vid { mixed-blend-mode: screen; opacity: .30}
        #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://webftp-bbs.hnol.net/yx2021/CR18/jfh.m4a" autoplay loop></audio>
        <video class="pd-vid" src="https://webftp-bbs.hnol.net/yx2021/CR18/yklx.mp4" autoplay loop muted></video>
        <progress id="prog"></progress>
        <div id="ma"><svg id="msvg" width="100%" height="100%" viewBox="-300 -300 600 600"></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 = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        lrc(pa, geci)

        var dr = Dr.dr(msvg);
        dr.defs('defs');
        dr.g('g1').addTo('defs');
        dr.polyline('0 0,0 260', 'none', 'cyan', 3).addTo('#g1');
        dr.ellipse(-0, 260, 40, 20, 'skyblue').addTo('#g1');
        var tt = 12;
        Array.from({length: tt}).forEach((_,k) => {
        dr.line(3, 0, 70, 300, '#eee', 15).transform(`rotate(${160/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);
</script></td></tr></table>

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

图美，歌靓，欣赏问好！

红影 发表于 2025-9-28 22:08

漂亮，进度条还是改变颜色的，歌词同步也漂亮，给新新点赞{:4_199:}

红影 发表于 2025-9-28 22:08

好久不见新新了，很开心看到你{:4_187:}
页: [1]
查看完整版本: 童丽-烟花三月下扬州