offset-distance以路径总长百分比为首选单位，0%起始、100%终点；开放路径越界值被截断，封闭路径支持循环；必须配合@keyframes动画与position定位才生效。
offset-distance 的取值规则和实际效果
offset-distance 控制的是元素在 offset-path 上的“行进刻度”，不是像素距离，而是路径总长的相对比例。它的值可以是百分比（如 0%、50%、100%）或长度单位（如 20px、1.5em），但**百分比才是最稳定、最可预测的用法**。
关键点在于：路径是否封闭会影响超出范围值的表现：
- 开放路径（如
path("M0,0 L100,50")）：小于0%等同于0%，大于100%等同于100% - 封闭路径（如
circle(50px at 50px 50px)）：支持循环，120%就是绕完一圈再走 20%，-10%会反向偏移 10%
配合 @keyframes 实现平滑移动动画
单纯设置一个静态 offset-distance 没有意义，必须靠动画驱动。常见错误是直接在元素上写 offset-distance: 0% → 100%，但 CSS 动画不支持直接对 offset-distance 做过渡——它必须嵌套在 @keyframes 中，并通过 animation 触发。
正确写法示例：
div.mover {
position: absolute;
offset-path: path("M10,10 C40,5 70,5 100,10");
offset-anchor: center;
offset-rotate: auto;
animation: move-along 3s ease-in-out forwards;
}
@keyframes move-along {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
注意：forwards 很重要，否则动画结束后元素会跳回初始位置；ease-in-out 能避免机械感，但若需匀速，请用 linear。
为什么用百分比比用 px 更可靠
用 px 值设定 offset-distance 表面看更“精确”，但实际极易出错：
- 路径长度由浏览器动态计算，不同引擎、缩放级别下结果可能微异
- 响应式场景中，
path()字符串本身不随容器缩放，但100px在高 DPI 屏幕上可能只走一半路程 - SVG 路径含贝塞尔曲线时，
100px并不等于视觉上“1/3 路程”，而33.33%才真正对应三分之一进度
所以除非你明确知道路径总长且永不变化（比如固定尺寸 SVG 的 getTotalLength() 返回值），否则一律优先用百分比。
容易被忽略的定位前提
offset-distance 不会生效，最常见的原因是忘了设 position：
- 元素必须是
position: absolute、fixed或sticky——static和relative下该属性被忽略 -
offset-path必须有效，空值、语法错误（如漏掉引号、括号不匹配）会导致整条路径失效，此时offset-distance形同虚设 - 检查控制台是否报
Invalid property value或类似警告，尤其注意path("...")内部不能有换行或未转义双引号
真正卡住调试的，往往不是 offset-distance 本身，而是它依赖的底层定位和路径定义没立住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
