从此以后（学习马黑黑夏花效果）
本帖最后由 朵拉 于 2025-9-11 07:52 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/68c1810058cb8da5c898b967.jpg') 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://cccimg.com/view.php/58ad58c1092e8c41d91bdb027bd43ad5.mp3" autoplay="" loop=""></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.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.getTotalLength(); // 路径长度
// 音频播放时 : 进度变更+跳动
aud.ontimeupdate = () => {
progs.setAttribute('stroke-dashoffset', pathLength - pathLength * aud.currentTime / aud.duration);
progs.setAttribute('opacity', Math.random() * 0.5 + 0.5);
};
// 点击track路径 : 调节播放进度
progs.onclick = (e) => {
const point = msvg.createSVGPoint(); // 创建坐标对象
point.x = e.clientX;
point.y = e.clientY;
// 转换点坐标为svg坐标对象
const svgPoint = point.matrixTransform(msvg.getScreenCTM().inverse());
if (progs.isPointInStroke(svgPoint)) {
aud.currentTime = aud.duration * getDistanceFromStart(progs, svgPoint) / pathLength;
}
};
const geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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> @马黑黑
老师 晚上好，学生交作业，请指正{:4_190:} {:4_199:} 漂亮，欣赏精彩的制作。{:4_199:} 漂亮，欣赏朵宝好帖{:4_187:} 朵拉这个背景图用的漂亮，整体效果棒棒的
页:
[1]