CSS offset-path 属性

定义和用法

offset-path 属性用于为动画元素创建一条路径。

为动画 <div> 创建一条路径：

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}

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

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

值	描述
none	默认。元素的默认 offset-path 属性值。
path()	使用 SVG 语法指定路径。参阅：SVG 路径。
ray()	使用 CSS ray() 函数指定路径。
url()	使用 SVG 文件的 URL 指定路径。
<basic-shape>	使用 CSS 函数（如 inset()、circle()、ellipse() 或 polygon()）定义基本形状来指定路径。
<coord-box>	使用坐标框指定路径。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

默认值：	none
继承性：	否
动画制作：	支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45