偶然~ 发表于 2025-10-4 10:58

【月满花潮庆华诞】但愿人长久


<style>
        @import 'https://638183.freep.cn/638183/web/css/tz02.css';
        #pa { --offsetX: 100px;margin: 140px 0 40px calc(50% - 350px);--bg: tan url('https://ouran2023.s3-us-east-1.ossfiles.com/Brcj.jpg') no-repeat center/cover;
        #progress { position: absolute;left: 1229px;top:613px; bottom: 9%; width: 9vw; height: 10vw; transition: .4s; }
        #g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 10; transform-box: fill-box; transform-origin: center; animation: rotate 8s linear infinite var(--state); }
        #g2 { cursor: pointer; fill: none; stroke: #eee; stroke-opacity: .5; stroke-width: 10; stroke-linecap: round; }
        #prog { stroke: url(#grd); stroke-opacity: 1; }
        #btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
        @keyframes rot { to { transform: rotate(-360deg); } }
#lrc { --bg: linear-gradient(180deg,hsla(240,50%,20%,.20),hsla(240,50%,20%,.35)); position: absolute; left: 20%; bottom: 50px;font:normal 2.0em Microsoft YaHei; sans-serif; color:DarkCyan white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px hsla(0, 100%, 0%, .85)); pointer-events: none; z-index: 900; }

</style>
<div id="pa">
        <audio id="aud" src="https://ouran2023.s3-us-east-1.ossfiles.com/dyrcj.mp3" autoplay loop></audio>
        <video class="pd-vid" src="https://ouran2023.s3-us-east-1.ossfiles.com/rcj.mp4" autoplay loop muted></video>
        <svg id="progress" class="brightness" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
                <g id="g1"><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.1';                  
                import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
        var geci = [
        ['0.00', '但愿人长久',2.10],
['2.21', '词：苏轼',2.26],
['4.59', '曲：梁弘志',2.16],
['6.86', '演唱：王菲',4.46],
['11.56', '明月几时有',5.02],
['16.84', '把酒问青天',4.16],
['21.22', '不知天上宫阙',6.17],
['27.72', '今夕是何年',4.80],
['32.77', '我欲乘风归去',4.25],
['37.24', '唯恐琼楼玉宇',5.15],
['42.66', '高处不胜寒',5.40],
['48.34', '起舞弄清影',4.66],
['53.25', '何似在人间',6.77],
['60.38', '转朱阁低绮户照无眠',12.92],
['73.98', '不应有恨',2.65],
['76.77', '何事长向别时圆',7.34],
['84.50', '人有悲欢离合',8.13],
['93.06', '月有阴晴圆缺',4.58],
['97.88', '此事古难全',5.14],
['103.29', '但愿人长久',5.71],
['109.30', '千里共婵娟',5.61],
['115.20', '祝你圆满安康',12.89],
['128.77', '祝你幸福快乐',15.17],
['144.74', '我欲乘风归去',7.81],
['152.96', '唯恐琼楼玉宇',5.01],
['158.23', '高处不胜寒',4.47],
['162.94', '起舞弄清影',5.54],
['168.77', '何似在人间',6.29],
['175.39', '转朱阁低绮户照无眠',12.27],
['188.31', '不应有恨',2.56],
['191.00', '何事长向别时圆',7.94],
['199.36', '别时圆',10.27],
['210.17', '人有悲欢离合',5.01],
['215.44', '月有阴晴圆缺',5.19],
['220.90', '此事古难全',5.12],
['226.29', '但愿人长久',4.62],
['231.15', '千里共婵娟',6.52],
['238.01', '感谢欣赏',6.65],
['245.01', '祝你月圆人安岁岁甜',4.5]


];
        lrc(pa, geci);
        var dr = Dr.dr(progress);

        dr.gradient('linearGradient', {id: 'grd',x1: 0, x2:0, y1: 0, y2: 0.75}, [['red',0],['gold',0.5],['darkred',1]]);
        dr.path('M-130 -50 C-240 220,240 220,130 -50').id('track').addTo(g2);
        dr.path('M-130 -50 C-240 220,240 220,130 -50').id('prog').addTo(g2);
        dr.ellipse(0, 0, 100, 20).addTo(g1).rotates(3);
        dr.path('M-160 0 Q0 -260,160 0').set('id','txtpath').addTo('defs');
        dr.text('偶然 · 制作', 0, 0, 'url(#grd)')
          .sets({stroke: 'darkred', 'storke-width': 2})
          .style('font: bold 3.0em sans-serif; letter-spacing: 4px; text-anchor: middle;')
          .textPath('txtpath','50%');

        FS(pa, g1);
</script>

偶然~ 发表于 2025-10-4 11:31

桂魄初生秋露微，
银汉无声转玉盘。
欲倾北斗斟沧海，
却恐琼楼不胜寒。
笛里关山三万里，
镜中霜鬓二十年。
唯愿清辉长照处，
人间灯火俱团圆。

梦江南 发表于 2025-10-4 11:59

画面漂亮、雅致，歌声委婉。赞！

偶然~ 发表于 2025-10-4 12:17

梦江南 发表于 2025-10-4 11:59
画面漂亮、雅致，歌声委婉。赞！

感谢梦江南的回帖支持，祝你国庆中秋快乐

偶然~ 发表于 2025-10-4 12:26

感谢马老师的精彩代码，谢谢啦！

澜天 发表于 2025-10-4 12:56

唯愿清辉长照处，
人间灯火俱团圆。
欣赏美图美诗
中秋快乐
{:4_204:}

红影 发表于 2025-10-4 15:28

好漂亮的制作，欣赏偶然君好帖，双节快乐{:4_187:}

偶然~ 发表于 2025-10-5 13:26

澜天 发表于 2025-10-4 12:56
唯愿清辉长照处，
人间灯火俱团圆。
欣赏美图美诗


祝你国庆中秋快乐

偶然~ 发表于 2025-10-5 13:27

红影 发表于 2025-10-4 15:28
好漂亮的制作，欣赏偶然君好帖，双节快乐

祝你开心幸福，中秋国庆快乐

澜天 发表于 2025-10-6 08:10

偶然~ 发表于 2025-10-5 13:26
祝你国庆中秋快乐

中秋快乐
{:4_191:}

小辣椒 发表于 2025-10-6 13:43

欣赏偶然精彩的制作{:4_199:}

小辣椒 发表于 2025-10-6 13:44

祝中秋节快乐!

六。 发表于 2025-10-12 13:55

偶然看看 心旷神怡{:4_191:}
页: [1]
查看完整版本: 【月满花潮庆华诞】但愿人长久