CSS offset-padweg eigenschap

定义和用法

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

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

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

Chrome	Edge	Firefox	Safari	Opera
55	79	72	15.4	45