小辣椒 发表于 2025-10-2 13:39

爱我中华 - 宋祖英

<style>
        @import 'https://638183.freep.cn/638183/web/css/tz02.css';
        #pa { --offsetX: 81px;margin: 140px 0 40px calc(50% - 500px);--bg: tan url('https://wj.zp68.com/lxx/yunhua/2025/09/30/b.jpg') no-repeat center/cover;
        #progress { position: absolute; bottom: 30%; width: 25vw; height: 25vw; transition: .4s; }
        #g1 { cursor: pointer; fill: transparent; stroke: url('#grd'); stroke-width: 6; 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: 8; 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://wj.zp68.com/lxx/yy/宋祖英 - 爱我中华.mp3" autoplay loop></audio>
        <video class="pd-vid" src="https://wj.zp68.com/lxx/yunhua/2025/09/30/24.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', '爱我中华 - 宋祖英',5.17],
['5.44', '词：乔羽',2.03],
['7.58', '曲：徐沛东',1.48],
['9.14', '爱我中华',3.83],
['13.17', '爱我中华',4.23],
['17.62', '赛罗罗赛罗罗赛罗罗赛罗罗',1.75],
['19.46', '赛罗罗赛罗罗赛罗罗赛罗罗',2.14],
['21.71', '嘿~',2.24],
['24.07', '五十六个星座',1.86],
['26.03', '五十六枝花',1.93],
['28.06', '五十六族兄弟姐妹是一家',3.99],
['32.26', '五十六种语言',2.13],
['34.50', '汇成一句话',2.00],
['36.61', '爱我中华',1.02],
['37.68', '爱我中华',1.05],
['38.79', '爱我中华',1.96],
['40.85', '嗨啰咿啰嘿啰嘿',1.89],
['42.84', '嗨啰咿啰嘿啰嘿',1.98],
['44.92', '嗨啰咿啰嘿啰咿啰嘿啰',2.22],
['47.26', '爱我中华',2.26],
['49.64', '五十六个星座',1.81],
['51.55', '五十六枝花',2.19],
['53.85', '五十六族兄弟姐妹是一家',4.03],
['58.09', '五十六种语言',2.00],
['60.20', '汇成一句话',2.03],
['62.34', '爱我中华',0.99],
['63.38', '爱我中华',1.03],
['64.46', '爱我中华',2.14],
['66.71', '爱我中华',1.99],
['68.80', '健儿奋起步伐',2.05],
['70.96', '爱我中华',1.92],
['72.98', '建设我们的国家',2.14],
['75.23', '爱我中华',1.98],
['77.31', '中华雄姿英发',2.10],
['79.52', '爱我中华',1.94],
['81.56', '五十六族 兄弟姐妹',1.97],
['83.63', '五十六种语言汇成一句话',4.06],
['87.90', '爱我中华',2.39],
['90.42', '热烈庆祝祖国76周年华诞！',24.60],
['116.31', '五十六个星座',1.81],
['118.22', '五十六枝花',1.81],
['120.12', '五十六族 兄弟姐妹是一家',4.28],
['124.63', '五十六种语言 汇成一句话',3.90],
['128.74', '爱我中华',1.07],
['129.87', '爱我中华',1.00],
['130.92', '爱我中华',1.98],
['133.00', '嗨啰咿啰嘿啰嘿',1.68],
['134.77', '嗨啰咿啰嘿啰嘿',2.45],
['137.35', '嗨啰咿啰嘿啰咿啰嘿啰',2.02],
['139.48', '爱我中华',2.29],
['141.89', '爱我中华 健儿奋起步伐',3.82],
['145.91', '爱我中华 建设我们的国家',4.09],
['150.21', '爱我中华 中华雄姿英发',3.95],
['154.37', '爱我中华',2.14],
['156.62', '五十六族 兄弟姐妹',1.98],
['158.70', '五十六种语言汇成一句话',4.09],
['163.01', '爱我中华 ',2.23],
['165.36', '热烈庆祝祖国76周年华诞！',16.27],
['182.49', '五十六个星座 五十六支花',3.92],
['186.62', '五十六族兄弟姐妹是一家',4.05],
['190.88', '五十六种语言 汇成一句话',4.05],
['195.14', '爱我中华',1.05],
['196.25', '爱我中华',1.04],
['197.35', '爱我中华',1.96],
['199.41', '嗨啰咿啰嘿啰嘿',1.64],
['201.14', '嗨啰咿啰嘿啰嘿',2.30],
['203.56', '嗨啰咿啰嘿啰咿啰嘿啰',2.15],
['205.82', '爱我中华',2.30],
['208.24', '五十六个星座 五十六支花',3.94],
['212.39', '五十六族兄弟姐妹是一家',4.11],
['216.72', '五十六种语言 汇成一句话',3.95],
['220.88', '爱我中华',0.97],
['221.90', '爱我中华',0.98],
['222.93', '爱我中华',2.20],
['225.25', '爱我中华 健儿奋起步伐',3.88],
['229.33', '爱我中华 建设我们的国家',4.27],
['233.83', '爱我中华 中华雄姿英发',3.99],
['238.03', '爱我中华',1.99],
['240.12', '五十六族 兄弟姐妹',2.06],
['242.29', '五十六种语言汇成一句话',4.01],
['246.51', '爱我中华 嘿',2.88],
['249.54', '谢谢欣赏',4.04],
['253.79', '',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-2 13:39

朋友们国庆节快乐！

祝福祖国生日快乐！

liumang 发表于 2025-10-2 22:01

漂亮的代码制作。威武雄壮的歌声，爱我中华 爱我中华 爱我中华{:5_152:}{:5_152:}

liumang 发表于 2025-10-2 22:03

居中设置我修改了，小辣椒是发帖走人，回看都没有看{:5_118:}

萝卜头 发表于 2025-10-5 21:34

代码制作，有特色，学习了{:5_150:}{:5_150:}

萝卜头 发表于 2025-10-5 21:34

谢谢分享{:5_152:}{:5_152:}
页: [1]
查看完整版本: 爱我中华 - 宋祖英