属性值说明
| 值 | 说明 |
|---|---|
| none | 未指定运动路径。这是此属性的默认值。 |
| ray() | 从盒子的位置开始并沿着指定角度定义的方向前进的线段。 |
| url() | 引用要用作移动路径的SVG元素的ID。 |
| <basic-shape> | 指定包含以下内容的形状：圆（）、椭圆（）、插入（）、多边形（）或者路径（）。 |
| initial | 使属性使用其默认值。 |
| inherit | 从其父元素继承属性。 |
offset-path CSS 属性用于指定元素要遵循的移动路径并定义元素的位置。
路径上的位置由 offset-distance 属性决定。
在规范的早期版本中，偏移路径的名称是“运动路径”。
但是，它已更改为 offset-path，因为该属性指定了静态位置。
offset-path 属性没有动画，它只是定义动画的路径。
这种偏移特性是一种实验技术。
如果你在 CSS 中定义了 offset-path，你可以使用 JavaScript 来控制动画。
| 初始值 | none |
|---|---|
| 应用于 | 可变形元素。 |
| 继承 | 无效 |
| 可动画的 | 是的。 |
| 版本 | 运动路径模块级别1 |
| DOM 语法 | object.style.offsetPath =“Ray（）”; |
语法
offset-path: none | ray() | path() | <url> | <basic-shape>;
带有 offset-rotate 和 animation 属性的 offset-path 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #ccc;
}
.mover {
width: 70px;
height: 70px;
background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
position: absolute;
left: 30%;
top: 100px;
offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
offset-rotate: reverse;
animation: move 3s linear infinite;
}
@keyframes move {
100% {
offset-distance: 100%;
}
}
</style>
<body>
<h2>Offset-path 属性示例</h2>
<div class="mover"></div>
</body>
</html>
offset-path 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
body {
background-color: #666;
}
.item {
width: 100px;
height: 40px;
offset-position: 0% 0%;
offset-path: path('m 100 50 h 150 v 150');
}
#box1 {
background-color: #8ebf42;
offset-distance: -280%;
}
#box2 {
background-color: #1c87c9;
offset-distance: 190%;
}
</style>
<body>
<div class="item" id="box1"></div>
<div class="item" id="box2"></div>
</body>
</html>
日期：2020-06-02 22:14:40 来源：oir作者：oir