李子柒视频背景音乐精选②
本帖最后由 马黑黑 于 2025-10-2 12:05 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz03.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/lzq2.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; 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(200,200,200,.8); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
#mList { min-width: 160px; right: 20px; top: 20px; color: beige; border: 8px ridge 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">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3e07448ff.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="1">
<stop offset="0%" stop-color="plum"></stop>
<stop offset="50%" stop-color="red"></stop>
<stop offset="100" stop-color="black"></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 Q300 0,0 180').id('track').addTo('g2');
dr.path('M0 -180 Q300 0,0 180').id('prog').addTo('g2');
var musics = [['32743519', '江上清风游'],['1457489326', '秋雨漫漫'],['1334831069', '水仙雨'],['1468214985', '秋风'],['1825317102', '苔痕·尚绿'],['1336994546', '知为谁'],['1304719349', '8月23日'],['1334675131', '逃不开夏天'],['495565956', '宏村'],['535600766', '昔年']].map(ar => ['https://music.163.com/song/media/outer/url?id=' + ar, ar]);
FS(pa, g1, musics);
</script> 本帖最后由 马黑黑 于 2025-10-2 12:05 编辑
帖子代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz03.css';
#pa { --offsetX: 81px; --bg: #ccc url('https://638183.freep.cn/638183/t24/w6/lzq2.webp') no-repeat center/cover; }
#progress { position: absolute; width: 12vw; height: 12vw; 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(200,200,200,.8); }
#g1 { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: url(#grd); animation: rotate 8s linear infinite var(--state); }
#btnFs { right: 20px; bottom: 20px; color: white; border-color: currentColor!important; }
#mList { min-width: 160px; right: 20px; top: 20px; color: beige; border: 8px ridge 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">
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3e07448ff.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="1">
<stop offset="0%" stop-color="plum"></stop>
<stop offset="50%" stop-color="red"></stop>
<stop offset="100" stop-color="black"></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 Q300 0,0 180').id('track').addTo('g2');
dr.path('M0 -180 Q300 0,0 180').id('prog').addTo('g2');
var musics = [['32743519', '江上清风游'],['1457489326', '秋雨漫漫'],['1334831069', '水仙雨'],['1468214985', '秋风'],['1825317102', '苔痕·尚绿'],['1336994546', '知为谁'],['1304719349', '8月23日'],['1334675131', '逃不开夏天'],['495565956', '宏村'],['535600766', '昔年']].map(ar => ['https://music.163.com/song/media/outer/url?id=' + ar, ar]);
FS(pa, g1, musics);
</script>
黑黑又一个多歌曲代码分享，列表换了一边了而且加了立体的，漂亮{:4_199:} 国庆节不休息啊，勤奋的小蜜蜂{:4_170:} 小辣椒 发表于 2025-10-2 12:55
国庆节不休息啊，勤奋的小蜜蜂
老蜜蜂{:4_196:} 小辣椒 发表于 2025-10-2 12:54
黑黑又一个多歌曲代码分享，列表换了一边了而且加了立体的，漂亮
这些都是基于HTML5的基本设置 马黑黑 发表于 2025-10-2 13:03
这些都是基于HTML5的基本设置
黑黑，你速度太快了，来不及做了 马黑黑 发表于 2025-10-2 13:03
老蜜蜂
反正很勤奋{:4_170:} 小辣椒 发表于 2025-10-2 13:18
反正很勤奋
搭建了那么多的模块，做帖其实就是举手之劳 小辣椒 发表于 2025-10-2 13:18
黑黑，你速度太快了，来不及做了
这个和之前你的的专辑是差不多的，只是帖子的CSS代码中多了一些修饰 节日快乐她也开始唱歌了啊 绿叶清舟 发表于 2025-10-2 21:06
节日快乐她也开始唱歌了啊
这是视频背景音乐 这个制作漂亮，歌曲也好听，感谢黑黑的多歌曲的代码{:4_199:} 马黑黑 发表于 2025-10-2 18:54
搭建了那么多的模块，做帖其实就是举手之劳
速度太快了 马黑黑 发表于 2025-10-2 18:55
这个和之前你的的专辑是差不多的，只是帖子的CSS代码中多了一些修饰
反正又有了修改，黑黑还是精益求精的 小辣椒 发表于 2025-10-4 21:24
反正又有了修改，黑黑还是精益求精的
这点修改都可以做到，只要具备一定的HTML5相关知识与技能 小辣椒 发表于 2025-10-4 21:23
速度太快了
一般一般，班里倒数第三 红影 发表于 2025-10-2 22:55
这个制作漂亮，歌曲也好听，感谢黑黑的多歌曲的代码
阔气阔气
页:
[1]