CSS 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属性为动画元素创建一条要遵循的路径。

笔记：目前，仅path()和none是支持的值offset-path属性。

默认值：	没有任何
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
offset-path	55.0	79.0	72.0	15.4	45.0

offset-path: none| value|initial|inherit;

Value	Description
none	Default. The element's default offset-path property value.
path()	Specify a path in SVG syntax. Learn about SVG paths
ray()	Currently not supported. Specify a path with the CSS ray() function.
url()	Currently not supported. Specify a path by using the URL to an SVG file.
<basic-shape>	Currently not supported. Specify a path by defining a basic shape using CSS functions like inset(), circle(), ellipse() or polygon().
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit