offset-distance

基线 2023

新功能

自 2023 年 8 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在旧设备或浏览器中无法使用。

**offset-distance** CSS 属性指定元素放置在 offset-path 上的位置。

试一试

语法

css
/* Default value */
offset-distance: 0;

/* the middle of the offset-path */
offset-distance: 50%;

/* a fixed length positioned along the path */
offset-distance: 40px;

/* Global values */
offset-distance: inherit;
offset-distance: initial;
offset-distance: revert;
offset-distance: revert-layer;
offset-distance: unset;
<length-percentage>

一个长度值，指定元素在路径上（由 offset-path 定义）的距离。

100% 代表路径的总长度（当 offset-path 定义为基本形状或 path() 时）。

正式定义

初始值0
应用于可变换元素
继承否
百分比指的是路径的总长度
计算值对于 <length> 是绝对值，否则为百分比
动画类型一个 长度，百分比 或 calc()；

正式语法

offset-distance = 
  <length-percentage>  

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

示例

在动画中使用 offset-distance

CSS 运动路径中的运动方面通常来自对 offset-distance 属性的动画。如果你想要沿其完整路径对元素进行动画，你将定义它的 offset-path，然后设置一个动画，将 offset-distance 从 0% 变为 100%。

HTML

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

CSS

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

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

结果

规范

规范
运动路径模块级别 1
# offset-distance-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅