夏花

马黑黑 · 发表于 2025-9-8 20:26

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-9-8 20:26

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/xxhx.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { animation: unset; cursor: unset; left: 10px; bottom: 65px; }
#btnFs { right: 20px; top: 20px; color: #eee; border-color: currentColor!important; }
#player { stroke-width: 2; cursor: pointer; animation: rotate 8s linear infinite var(--state); }
#lrc { left: 30px; bottom: 20px; }
#lrc::before { background: green; background-clip: text; -webkit-background-clip: text; }
.prog { stroke-width: 10; transition: 0.25s; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2717576053" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" autoplay loop muted></video>
<div id="ma" class="brightness">
<svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="lightyellow" stroke="red" stroke-dasharray="1227" stroke-dashoffset="1227"></path>
<path class="prog" d="M0 190 C-200 20,-300 -320,0 -100 C300 -320,200 20,0 190" fill="none" stroke="rgba(100,0,0,.35)" stroke-dasharray="1227" stroke-dashoffset="0" style="cursor: pointer;">
<title>调节进度</title>
</path>
<path id="player" d="M0 0 C-160 100 100 100 0 0 C-6.603 -188.564 -136.603 36.603 0 0 C166.603 88.564 36.603 -136.603 0 0Z" fill="darkred" stroke="yellow">
<title>Alt+X</title>
</path>
</svg>
</div>
</div>
<script type="module">
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
const progs = document.querySelectorAll('.prog'); // 进度条(path标签)标识
const pathLength = progs[0].getTotalLength(); // 路径长度
// 音频播放时 : 进度变更+跳动
aud.ontimeupdate = () => {
progs[0].setAttribute('stroke-dashoffset', pathLength - pathLength * aud.currentTime / aud.duration);
progs[0].setAttribute('opacity', Math.random() * 0.5 + 0.5);
};
// 点击track路径 : 调节播放进度
progs[1].onclick = (e) => {
const point = msvg.createSVGPoint(); // 创建坐标对象
point.x = e.clientX;
point.y = e.clientY;
// 转换点坐标为svg坐标对象
const svgPoint = point.matrixTransform(msvg.getScreenCTM().inverse());
if (progs[1].isPointInStroke(svgPoint)) {
aud.currentTime = aud.duration * getDistanceFromStart(progs[1], svgPoint) / pathLength;
}
};
const geci = [
[1.30,"一颗狼星：夏花",1.5],
[4.03,"生命呀坠落吧",2.0],
[6.04,"颓败后再发芽",1.0],
[7.09,"永恒呀一霎那",2.0],
[9.08,"春雨飘洒",1.0],
[10.08,"绚烂在盛夏",1.0],
[11.08,"生命呀起舞吧",2.0],
[13.04,"绽放后又腐化",2.0],
[15,"流光呀不停下",1.1],
[16.09,"叶纹写出",1.0],
[17.09,"宇宙的火花",2.0],
[19.05,"根系相联",1.0],
[20.06,"蜿蜒成掌纹",2.0],
[22.07,"手中托起",1.9],
[24.02,"蝴蝶的重生",1.9],
[26.03,"腐烂果核",1.0],
[27.07,"长出云层",1.9],
[29.01,"暗河涌动",1.1],
[30.08,"反哺晨昏",3.0],
[33.04,"泥土裂开",1.0],
[34.08,"胚胎变星辰",2.0],
[36.09,"冰雪消融",1.9],
[38.02,"结下春的藤",2.0],
[40.05,"枝叶繁茂",1.0],
[41.09,"遮掩伤痕",1.9],
[43.01,"吐息之际",1.1],
[44.09,"日落月升",2.0],
[46.06,"解冻蒸发凝结融化",3.0],
[50.03,"悬挂崩塌轮回颂答",3.0],
[53.06,"解冻蒸发凝结融化",3.0],
[57.03,"悬挂崩塌轮回颂答",3.0],
[60.08,"生命呀坠落吧",2.0],
[62.08,"颓败后再发芽",2.0],
[64.08,"永恒呀一霎那",1.9],
[66.02,"春雨飘洒",1.0],
[67.02,"绚烂在盛夏",1.0],
[68.03,"生命呀起舞吧",1.1],
[69.09,"绽放后又腐化",2.0],
[71.04,"流光呀不停下",2.0],
[73.02,"叶纹写出",1.0],
[74.03,"宇宙的火花",2.0],
[89.09,"根系相联",1.9],
[91.02,"蜿蜒成掌纹",2.0],
[93.03,"手中托起",1.0],
[94.07,"蝴蝶的重生",2.0],
[96.09,"腐烂果核",1.9],
[98.03,"长出云层",1.0],
[99.07,"暗河涌动",2.0],
[101.04,"反哺晨昏",2.0],
[103.09,"泥土裂开",1.9],
[105.03,"胚胎变星辰",2.0],
[107.05,"冰雪消融",1.0],
[108.08,"结下春的藤",2.8],
[111,"枝叶繁茂",1.0],
[112.04,"遮掩伤痕",1.0],
[113.07,"吐息之际",2.0],
[115.05,"日落月升",2.0],
[117.06,"解冻蒸发凝结融化",3.0],
[120.08,"悬挂崩塌轮回颂答",3.0],
[124.06,"解冻蒸发凝结融化",3.0],
[128.08,"悬挂崩塌轮回颂答",3.0],
[131.03,"生命呀坠落吧",1.1],
[132.1,"颓败后再发芽",2.0],
[134.09,"永恒呀一霎那",2.0],
[136.07,"春雨飘洒",1.0],
[137.07,"绚烂在盛夏",1.0],
[138.08,"生命呀起舞吧",1.9],
[140.03,"绽放后又腐化",1.1],
[141.1,"流光呀不停下",3.0],
[144.06,"叶纹写出",0.0],
[144.09,"宇宙的火花",2.3],
[152.06,"生命呀起舞吧",2.0],
[154.06,"绽放后又腐化",2.0],
[156.05,"流光呀不停下",2.0],
[158.01,"叶吻写出",1.0],
[159,"宇宙的火花",3.1]
];
FS(pa, player);
lrc(pa, geci);
// 获取路径点击点长度
function getDistanceFromStart(pathElement, point) {
const samples = Math.ceil(pathLength); // 按像素采样
let bestPos = 0;
let bestDist = Infinity;
// 路径起点
const startPoint = pathElement.getPointAtLength(0);
let minDist = Math.hypot(point.x - startPoint.x, point.y - startPoint.y);
// 采样路径上的点
for (let i = 0; i <= samples; i++) {
const pos = (i / samples) * pathLength;
const pathPoint = pathElement.getPointAtLength(pos);
const dist = Math.hypot(point.x - pathPoint.x, point.y - pathPoint.y);
if (dist < minDist) {
minDist = dist;
bestPos = pos;
}
}
// 处理封闭路径
if (bestPos > pathLength - 1 && minDist > Math.hypot(point.x - startPoint.x, point.y - startPoint.y)) {
return 0;
}
return bestPos;
}
</script>