offset-position

**offset-position** CSS 属性定义元素沿着路径的初始位置。此属性通常与 offset-path 属性结合使用以创建运动效果。offset-position 的值决定了如果 path() 等 offset-path 函数没有指定自己的起始位置，则元素在沿着偏移路径移动时最初放置的位置。

offset-position 属性是基于 offset 组成属性的运动系统的一部分，包括 offset-anchor、offset-distance 和 offset-path。这些属性协同工作以沿着路径创建各种运动效果。

语法

css

/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

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

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

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

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

值

normal: 指示元素没有偏移起始位置，并将元素放置在包含块的50% 50%处。这是默认值。
auto: 指示偏移起始位置是元素框的左上角。
<position>: 将位置指定为 x/y 坐标，以相对于其框边缘放置元素。可以使用一个到四个值定义位置。如果使用两个非关键字值，则第一个值表示水平位置，第二个值表示垂直位置。如果只指定一个值，则第二个值假定为center。如果使用三个或四个值，则<length-percentage> 值是前面关键字值(s)的偏移量。有关这些值类型的更多说明，请参阅 background-position。

正式定义

初始值	`normal`
应用于	可转换元素
继承	否
百分比	指的是包含块的大小
计算值	对于 `<length>` 绝对值，否则为百分比
动画类型	一个 position

正式语法

offset-position = 
  normal      |
  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-path 的初始 offset-position

在此示例中，offset-path 属性用于定义 cyan 元素应沿其移动的路径。 path() CSS 函数的值是一个 SVG 数据路径，它描述了一条曲线路径。在 move 动画期间，元素沿着此曲线路径移动。

HTML

html

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

CSS

#wrap {
  width: 260px;
  height: 160px;
  border: 1px dashed black;
}

css

#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

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

结果

比较各种偏移起始位置

此示例直观地比较了当 ray() 用于为 offset-path 属性指定值时，元素的各种初始偏移起始位置。元素框内的数字指示应用了 CSS 的元素以及元素的锚点。

<div class="wrap">
  <div class="box">0</div>
  <div class="box box0">0</div>
  <pre>
    offset-position: normal;
    /* No offset-path specified */
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box1">1</div>
  <pre>
    offset-position: normal;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box2">2</div>
  <pre>
    offset-position: auto;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box3">3</div>
  <pre>
    offset-position: left top;
    offset-path: ray(0deg);
  </pre>
</div>

<div class="wrap">
  <div class="box">0</div>
  <div class="box box4">4</div>
  <pre>
    offset-position: 30% 70%;
    offset-path: ray(120deg);
  </pre>
</div>

.wrap {
  position: relative;
  width: 80vw;
  height: 120px;
  border: 1px solid black;
  margin: 0 2em 4em 5em;
  text-align: center;
}

pre {
  font-size: 1em;
  text-align: right;
  padding-right: 10px;
  line-height: 1em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
}

.box + .box {
  opacity: 1;
}

css

.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

结果

在box0中，如果缺少offset-path属性，则offset-position为normal或auto时将不起作用。当offset-position为normal时，光线从包含块的中心开始（即，50% 50%）。这是偏移路径的默认起始位置，并且在未指定offset-position时使用。请注意偏移起始位置auto和left top之间的区别。值auto将元素的锚点与自身左上角对齐，而值left top将元素的锚点与包含块的左上角对齐。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载