李健歌曲4首（学习黑黑老师的李子柒视频背景音乐代码）
本帖最后由 梦江南 于 2025-10-1 12:34 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz03.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://cccimg.com/view.php/e08383b2c2038ccb1e047793428d8c40.jpg') no-repeat center/cover;border-radius:32px; }
#progress { position: absolute;left: 20% ;width: 6vw; height: 6vw; transition: .4s; }
#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(155,0,0,8); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
#mList { left: 260px; top: 30px; color: beige; border: 8px double beige; border-radius: 12px; background: rgba(20,100,0,.5); }
#mList > p { font-size: 18px; }
#mList > p:hover { font-weight: bold; }
.hLight { color: yellow; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=25896403" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0fbdb9b80.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="0.5">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="transparnet"></stop>
<stop offset="100" stop-color="green"></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 Q-300 0,0 180').id('track').addTo('g2');
dr.path('M0 -180 Q-300 0,0 180').id('prog').addTo('g2');
var musics = [['110041', '当有天老去'], ['33248189', '爱有天意'], ['2094424898', '如愿'], ['2670054605', '万物安生'], ].map(ar => ['https://music.163.com/song/media/outer/url?id=' + ar, ar]);
FS(pa, g1, musics);
</script> 阿姨节日好{:4_185:}
刚上来，这个多歌曲播放器很漂亮，是黑黑新的教程吗？我先去看看 阿姨这个制作太漂亮了，背景运用的也是特别好{:4_199:} @马黑黑
黑黑阿姨这个制作太漂亮了 小辣椒 发表于 2025-10-1 13:05
阿姨节日好
刚上来，这个多歌曲播放器很漂亮，是黑黑新的教程吗？我先去看看
小辣椒好，看到你很开心，节日快乐哦！{:5_150:}
这个教程是黑黑老师今天发的。 小辣椒 发表于 2025-10-1 13:51
阿姨这个制作太漂亮了，背景运用的也是特别好
谢谢小辣椒夸奖，有你的认可，阿姨很开心。{:4_204:} 漂亮！祝江南国庆快乐{:4_204:} 杨帆 发表于 2025-10-1 16:57
漂亮！祝江南国庆快乐
谢谢杨帆欣赏，国庆节同乐！{:4_204:} 我来听歌。谢谢江南。 梦油 发表于 2025-10-1 17:19
我来听歌。谢谢江南。
谢谢梦油来听歌。国庆节同乐！{:4_204:} 梦江南 发表于 2025-10-1 17:25
谢谢梦油来听歌。国庆节同乐！
听着你贴发的歌曲，享受节日的快乐。 梦油 发表于 2025-10-1 17:31
听着你贴发的歌曲，享受节日的快乐。
谢谢，听歌快乐。{:5_108:} 江南真快，这么快就把黑黑的最新代码做出来了，很赞{:4_199:} 红影 发表于 2025-10-1 22:33
江南真快，这么快就把黑黑的最新代码做出来了，很赞
问好影子，你这么晚怎么还要上来顶帖? 国庆节快乐！{:4_187:} 梦江南 发表于 2025-10-1 15:14
小辣椒好，看到你很开心，节日快乐哦！
这个教程是黑黑老师今天发的。
阿姨完成作业的速度太快了{:4_178:} 小辣椒 发表于 2025-10-4 22:11
阿姨完成作业的速度太快了
只有四首歌曲，第二首还不会唱了。
页:
[1]