offset-anchor

基线 2023

最新发布

自 2023 年 8 月起，此功能在最新的设备和浏览器版本中有效。此功能可能在较旧的设备或浏览器中不起作用。

offset-anchor CSS 属性指定沿 offset-path 移动的元素框内实际沿路径移动的点。

试试

语法

css
/* Keyword values */
offset-anchor: top;
offset-anchor: bottom;
offset-anchor: left;
offset-anchor: right;
offset-anchor: center;
offset-anchor: auto;

/* <percentage> values */
offset-anchor: 25% 75%;

/* <length> values */
offset-anchor: 0 0;
offset-anchor: 1cm 2cm;
offset-anchor: 10ch 8em;

/* Edge offsets values */
offset-anchor: bottom 10px right 20px;
offset-anchor: right 3em bottom 10px;

/* Global values */
offset-anchor: inherit;
offset-anchor: initial;
offset-anchor: revert;
offset-anchor: revert-layer;
offset-anchor: unset;

值

auto

offset-anchor 的值与元素的 transform-origin 相同，除非 offset-path 为 none，在这种情况下，它从 offset-position 获取其值。

<position>

<position> 定义了一个 x/y 坐标，用于将项目相对于元素框的边缘放置。它可以使用一到四个值来定义。有关更多详细信息，请参阅 <position> 和 background-position 参考页面。请注意，3 值位置语法不适用于任何使用 <position> 的情况，除了在 background(-position) 中。

正式定义

初始值auto
应用于可变换元素
继承否
百分比相对于元素参考框的宽度和高度
计算值对于 <length>，为绝对值，否则为百分比
动画类型a 位置

正式语法

offset-anchor = 
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

示例

设置各种 offset-anchor 值

在以下示例中，我们有三个嵌套在 <section> 元素中的 <div> 元素。每个 <div> 被赋予相同的 offset-path（一条 200 像素长的水平线）并设置为沿其移动。然后，这三个元素被赋予不同的 background-color 和 offset-anchor 值。

每个 <section> 都使用线性渐变进行样式设置，使其在中心有一条水平线，以便您可以直观地显示 <div> 的偏移路径在哪里运行。

这使您可以看到不同的 offset-anchor 值会产生什么影响——第一个 auto 导致 <div> 的中心点沿路径移动。另外两个分别导致 <div> 的右上角和左下角点沿路径移动。

HTML

html
<section>
  <div class="offset-anchor1"></div>
</section>
<section>
  <div class="offset-anchor2"></div>
</section>
<section>
  <div class="offset-anchor3"></div>
</section>

CSS

css
div {
  offset-path: path("M 0,20 L 200,20");
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
}

section {
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 49%,
    #000 50%,
    #000 51%,
    transparent 52%
  );
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.offset-anchor1 {
  offset-anchor: auto;
  background: cyan;
}

.offset-anchor2 {
  offset-anchor: right top;
  background: purple;
}

.offset-anchor3 {
  offset-anchor: left bottom;
  background: magenta;
}

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

结果

规范

规范
运动路径模块级别 1
# offset-anchor 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅