偏移锚点 | CSS-Tricks

offset-anchor 属性在应用它的框内定义一个点，作为沿 offset-path 移动的锚点。

这有点冗长，让我们分解一下。

你有一个元素，比如一个框

查看 CodePen 上 Geoff Graham (@geoffgraham) 的橙色方框。

你想让这个框沿着一条路径移动，比如一条波浪线。我们可以使用 SVG 在 HTML 中直接制作这条线，并将其用作框的 offset-path。我们使用 offset-distance 属性创建动画

查看 CodePen 上 Geoff Graham (@geoffgraham) 的路径上的橙色方块。

很好，很好。但是如果我们想让框看起来像是悬挂在直线上呢？你知道，就像一个人沿着滑索滑行。

这就是 offset-anchor 的作用！它标记元素上的一个点，并使用它来将元素定位在路径上。

这里有一个例子，三个不同的框以不同的锚点附着在同一条路径上

查看 CodePen 上 Geoff Graham (@geoffgraham) 的 NMbEpy。

.box {
  offset-anchor: [auto | ];
}

auto: 采用 offset-position 的值，只要该值不是 auto，并且 offset-path 设置为 none。
位置
- : 一个单位，从它所在的容器的相对宽度和高度计算得出。例如，50% 50% 将是正中心。请注意，关键字在这里有效，就像 background-position 中的 center center 会返回相同的结果。
- : 一个单位，从元素框的左上角偏移锚点。