偶然~ 发表于 2025-10-1 17: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/B.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: 40%; 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/jtsr.mp3" autoplay loop></audio>
        <video class="pd-vid" src="https://ouran2023.s3-us-east-1.ossfiles.com/gq.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', '今天是你的生日，中国',7.72],
['8.85', '词：韩静霆',6.02],
['15.19', '曲：谷建芬',5.32],
['20.79', '演唱：周深',10.18],
['31.51', '今天是你的生日',3.78],
['35.49', '我的中国',3.58],
['39.26', '清晨我放飞一群白鸽',6.57],
['46.18', '为你衔来一枚橄榄叶',8.07],
['54.67', '鸽子在崇山峻岭飞过',9.49],
['64.66', '我们祝福你的生日',3.50],
['68.34', '我的中国',3.69],
['72.22', '愿你永远没有忧患',3.63],
['76.04', '永远宁静',3.73],
['79.97', '我们祝福你的生日',3.65],
['83.81', '我的中国',3.34],
['87.33', '这是儿女们心中期望的歌',9.55],
['97.38', '热烈庆祝祖国76周年华诞！',8.05],
['105.85', '祝你国庆中秋平安快乐',22.67],
['129.71', '今天是你的生日',3.46],
['133.35', '我的中国',3.79],
['137.34', '清晨我放飞一群白鸽',7.25],
['144.97', '为你衔来一颗金色麦穗',7.26],
['152.61', '鸽子在风风雨雨中飞过',9.38],
['162.48', '我们祝福你的生日',3.80],
['166.48', '我的中国',3.62],
['170.29', '愿你逆风起飞',1.83],
['172.22', '雨中获得收获',5.54],
['178.05', '我们祝福你的生日',3.72],
['181.97', '我的中国',3.14],
['185.27', '这是儿女们心中期望的歌',7.82],
['193.50', '我们祝福你的生日',3.69],
['197.38', '我的中国',3.65],
['201.22', '愿你逆风起飞',1.87],
['203.19', '雨中获得收获',5.53],
['209.01', '我们祝福你的生日',3.66],
['212.86', '我的中国',3.21],
['216.24', '这是儿女们心中期望的歌',19.75],
['237.03', '感谢欣赏',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-1 17:59

感谢马老师的代码，祝福马老师国庆中秋快乐、阖家幸福！
国庆遇上中秋
献上最美祝福
诚祝您及家人
国庆中秋双节
平安健康快乐

樵歌 发表于 2025-10-1 20:07

好漂亮的制作作，选的歌手也是大家喜欢的。{:4_199:}

樵歌 发表于 2025-10-1 20:09

谁也唱不来周深这种好声音，听着心里舒坦。

偶然~ 发表于 2025-10-1 21:05

樵歌 发表于 2025-10-1 20:07
好漂亮的制作作，选的歌手也是大家喜欢的。

马老师的代码，开心幸福

偶然~ 发表于 2025-10-1 21:05

樵歌 发表于 2025-10-1 20:09
谁也唱不来周深这种好声音，听着心里舒坦。

对，周深的歌曲好听。

红影 发表于 2025-10-1 23:06

这个是马老师的最新代码效果呢，这个制作真漂亮。
欣赏偶然君好帖{:4_199:}

樵歌 发表于 2025-10-2 10:06

偶然~ 发表于 2025-10-1 21:05
马老师的代码，开心幸福

他@马黑黑 真是功德无量哈{:4_189:}

樵歌 发表于 2025-10-2 10:07

偶然~ 发表于 2025-10-1 21:05
对，周深的歌曲好听。

他的大鱼已经是顶流了！

偶然~ 发表于 2025-10-2 10:17

本帖最后由 偶然~ 于 2025-10-2 10:19 编辑

红影 发表于 2025-10-1 23:06
这个是马老师的最新代码效果呢，这个制作真漂亮。
欣赏偶然君好帖
感谢马老师精彩代码，为我们制作各种帖锦上添花！马老师功劳无量！

马黑黑 发表于 2025-10-2 11:59

樵歌 发表于 2025-10-2 10:06
他@马黑黑 真是功德无量哈

谬赞谬赞

小辣椒 发表于 2025-10-2 12:57

欣赏偶然的精彩制作，国庆节快乐！

游侠 发表于 2025-10-3 08:06

图美歌靓 制作精彩 双节快乐

小九 发表于 2025-10-3 18:32

祝福祖国！ 祝福大家双节快乐！{:4_187:}
页: [1]
查看完整版本: 【月满花潮庆华诞】今天是你的生日！