无需登录 数据私有 本地保存

CSS 运动路径构建器 - offset-path 动画设计

CSS 动画 CSS offset-path 动画 路径
46
0
0
0
运动路径构建器 可拖拽控制点编辑
动画控制
速度1×
动画参数
持续时间3s
迭代次数无限
路径信息
长度: -- 点数: --
生成的CSS
/* 点击预设或拖拽控制点 */
常见问题 & 知识点
什么是 CSS offset-path？
offset-path 是CSS属性，用于定义元素沿指定路径运动的轨迹。配合 offset-distance 和 @keyframes，可以让元素沿任意复杂路径平滑移动，无需JavaScript。它支持 path()、circle()、ellipse()、polygon()、rect()、ray() 等函数。
offset-path 浏览器兼容性如何？
截至2025年，Chrome 55+、Edge 79+、Opera 42+ 完整支持 offset-path。Firefox 72+ 支持 path() 但部分函数支持有限。Safari 16+ 开始支持。建议配合 @supports (offset-path: ...) 做渐进增强，并为不支持的浏览器提供降级方案。
如何让元素沿路径自动旋转？
使用 offset-rotate: auto; 可以让元素自动根据路径方向旋转，如火车沿轨道转弯。设置为 0deg 则保持固定朝向。还可以使用 auto <angle> 在自动旋转基础上增加偏移角度。
offset-path 和 clip-path 有什么区别？
offset-path 定义元素运动的轨迹，元素会沿路径移动位置；clip-path 定义元素的裁剪区域，隐藏路径外的部分。两者用途完全不同：一个控制位置动画，一个控制可见形状。
path() 函数中的坐标如何理解？
path() 使用SVG路径语法。坐标相对于元素在正常流中的初始位置。例如 M 0 0 C 100 -50, 200 150, 300 0 表示从起点(0,0)开始，经过两个贝塞尔控制点，到达(300,0)。元素会从初始位置出发沿此路径运动。
运动路径动画的性能如何？
CSS offset-path 动画由浏览器GPU加速处理，性能优秀，适合大量元素同时动画。相比JavaScript实现的路径动画，CSS方案更流畅且主线程占用更少。建议使用 will-change: offset-distance; 优化复杂动画。
🔧 相关工具