offset-path 是 css 中定义元素沿 svg 路径运动的属性，仅 chromium 系列（chrome≥79、edge≥79、opera≥66）原生支持，firefox 和 safari 完全不支持，需用 @supports 检测并提供 svg animatemotion 或 js 回退方案。
offset-path 是什么，浏览器支持到什么程度
offset-path 是 CSS 中用于定义元素运动路径的属性，它让元素能沿着指定的 SVG 路径（<path></path>）移动，配合 offset-distance 和 offset-rotate 可实现平滑的曲线飞行效果。但它不是“动画属性”，只是设置路径，真正动起来还得靠 transition 或 @keyframes 驱动 offset-distance。
目前仅 Chromium 内核浏览器（Chrome ≥ 79、Edge ≥ 79、Opera ≥ 66）原生支持；Firefox 和 Safari 完全不支持，且没有明确的启用计划。用前务必加 @supports (offset-path: path("")) 做降级处理。
关键事实：它不兼容 IE、Safari、Firefox —— 想全平台运行必须准备 SVG <animatemotion></animatemotion> 或 JS 方案（如 GSAP + getPointAtLength）作为 fallback。
怎么写一个基础的沿贝塞尔曲线飞行效果
核心是三步：定义路径 → 绑定到元素 → 驱动位移。路径推荐用 path() 函数直接写，避免引入外部 SVG 文件增加复杂度。
div.flyer {
offset-path: path('M 50 100 Q 200 50, 350 100 T 650 100');
offset-distance: 0;
transition: offset-distance 3s ease-in-out;
}
<p>div.flyer:hover {
offset-distance: 100%;
}</p>
-
path()里用的是 SVG 路径语法：M定起点，Q是二次贝塞尔（一个控制点），T是镜像续画，适合平滑波浪线 -
offset-distance单位是百分比（0%～100%）或长度值（如200px），但用百分比更稳妥，因路径总长自动归一化 - 别忘了设
position: absolute或position: fixed，否则元素会脱离文档流但位置可能错乱 - 若路径含
z（闭合）或a（椭圆弧），部分浏览器解析不稳定，建议优先用M/L/Q/C
如何让飞行物体始终朝向运动方向（自动旋转）
默认物体不会“抬头”或“转弯”，得靠 offset-rotate。最常用的是 auto 值，它会让元素的正 X 轴始终与路径切线对齐：
div.flyer {
offset-path: path('M100,200 C150,100 250,100 300,200');
offset-distance: 0%;
offset-rotate: auto; /* 关键：自动对齐切线方向 */
transition: offset-distance 2.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
-
offset-rotate: auto是默认行为，但显式写出更清晰；加reverse（如auto reverse）可翻转朝向 - 若需叠加额外旋转（比如飞机机头微仰），用
offset-rotate: auto 10deg，第二个角度是相对切线的偏移 - 注意：当路径在某点曲率为 0（比如直线段端点），
auto可能出现瞬时翻转，可改用offset-rotate: 0deg锁死，或拆分动画段规避
常见报错和踩坑点
offset-path 看似简单，但实际调试时容易卡在几个隐蔽问题上：
- 路径字符串里不能有换行或多余空格 ——
path('M0,0\nL100,100')会直接失效，必须写成单行 -
offset-distance设为0（无单位）会被忽略，必须写0%或0px - 使用
@keyframes时，offset-distance必须在每一帧都显式声明，哪怕值相同，否则动画会跳帧 - 父容器设了
transform（如scale(0.9)），可能导致路径渲染偏移 —— 这是 Chromium 已知 bug，临时解法是把offset-path元素提一层，脱离 transform 影响范围 - 路径太短（比如只有 10px 长），
offset-distance: 100%实际位移极小，肉眼难察觉，建议先用stroke在 SVG 中预览路径形状
CSS offset-path 的能力边界很清晰：它只管“走哪”和“朝哪”，不负责“怎么加速”“碰撞检测”“响应鼠标交互”。真要做出带物理感的飞行效果，很快就会撞上浏览器兼容性和控制粒度的墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
