在 SVG 的 Path 中，我们取其中一种绘制曲线的方法 -- 贝塞尔曲线，譬如下述这条 path，其中的 path 为 d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80"：
<svg xmlns="http://www.w3.org/2000/svg"> <path d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent"/> </svg>对应这样一条连续的贝塞尔曲线：
将对应的路径应用在 offset-path: path 中：
<div> div:nth-child(2) { width: 40px; height: 40px; background: linear-gradient(#fc0, #f0c); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }可以得到如下运动效果：
可以看到，元素是沿着贝塞尔曲线的路径进行运动的，并且，由于这次没有限制死 offset-rotate，元素的朝向也是跟随路径的朝向一直变化的。（可以联想成开车的时候，车头一直跟随道路会进行变化的，带动整个车身的角度变化）
完整的 Demo 你可以戳这里：CodePen Demo -- CSS Motion Path Demo
理解 offset-anchor 运动锚点OK，那么接下来，我们再看看 offset-anchor 如何理解。
还是上述的 DEMO，我们把小正方形替换成一个三角形，并且把运动的曲线给画到页面上，像是这样：
其中，三角形是通过 clip-path 实现的：
width: 40px; height: 40px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: linear-gradient(#fc0, #f0c);通常而言，沿着曲线运动的是物体的中心点（类比 transform-origin），在这里，我们可以通过 offset-anchor 改变运动的锚点，譬如，我们希望三角形的最下方沿着曲线运动：
.ball { width: 40px; height: 40px; clip-path: polygon(0 0, 100% 50%, 0 100%); offset-path: path('M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80'); offset-anchor: 0 100%; background: linear-gradient(#fc0, #f0c); animation: move 3000ms infinite alternate linear; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox 支持，Chrome 下暂时无法生效~
完整的 Demo 你可以戳这里：CodePen Demo -- CSS Motion Path offset-anthor Demo
运用 Motion Path 制作动画效果OK，上面我们基本把原理给过了一遍，下面我们就看看，运用 Motion Path，可以在实践中如何运用。
利用 Motion Path 制作按钮效果利用运动路径，我们可以制作一些简单的按钮点击效果。在之前，我在 CodePen 上见到过这样一种按钮点击效果：
其原理是运用了 background-radial 去生成每一个小圆点，通过控制 background-position 控制小圆点的位移，详细的 Demo 代码你可以戳这里：
CodePen Demo -- Bubbly button (Design by Gal Shir)