CSS 运动路径

CSS 运动路径模块允许开发者沿着自定义路径为任何图形对象制作动画。

CSS 变换模块提供了在不干扰页面上任何其他元素布局的情况下，重新定位、旋转、缩放和倾斜框的功能。这些变换可以进行动画和过渡，但方式相对基本。

CSS 运动路径模块的功能提供了偏移变换：使元素上的一个点与沿偏移路径的偏移距离对齐的变换，并可选择旋转变换后的元素以跟随路径方向。这个模块提供了强大的变换可能性，例如：

使用极坐标进行定位，而不是将变换限制在标准的矩形 transform 函数坐标。
沿着定义的路径为元素制作动画。

CSS 运动路径允许利用 CSS 形状函数来定义复杂的 2D 空间过渡。

例如，你可以使用 offset-path 属性定义任何你想要的特定形状路径。然后，通过为 offset-distance 属性制作动画，使元素沿该路径移动，并使用 offset-rotate 属性在任何点旋转它。

运动路径的实际应用

<div id="heart">
  <div id="motion-demo"></div>
</div>

#motion-demo {
  offset-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
  animation: move 3000ms infinite linear;
  width: 10px;
  height: 10px;
  background: red;
}

#heart {
  width: 200px;
  height: 200px;
  background-color: lightpink;
  clip-path: path(
    "M20,70 A40,40,0,0,1,100,70 A40,40,0,0,1,180,70 Q180,130,100,190 Q20,130,20,70 Z"
  );
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

在这个例子中，我们使用 CSS 遮罩和 CSS 形状将一个浅粉色背景的容器剪裁成心形。我们使用了一个 path() 函数作为 clip-path 属性的值。它的子元素是一个 10px x 10px 的红色方框，它会沿着其父元素的边缘移动。我们通过使用相同的 <basic-shape> 作为路径，并将方框的 offset-path 属性设置为相同的 path() 函数值来实现这一点。我们使用 CSS 动画在三秒内将 offset-distance 从 0% 更改为 100%。