元素在 offset-path 上的位置由其偏移距离 CSS 属性确定，该属性指定了它应放置在的位置。
可能的值
- <length-percentage> - 元素沿特定路径行进的距离由 offset-distance 属性给出的长度表示。当设置为 100% 时，它反映了 offset-path 指定的路由的整个长度。
适用于
可转换元素
语法
offset-distance = <length-percentage>
CSS offset-distance - 百分比值
以下示例演示了 offset-distance 属性的用法。
<html>
<head>
<style>
#offset-shape {
offset-path: path("M 10 80 Q 95 10 180 80 T 310 80");
animation: move 4000ms infinite linear;
width: 60px;
height: 40px;
background: #FFD700;
border-radius: 50%;
position: relative;
}
@keyframes move {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div id="offset-shape"></div>
</body>
</html>
CSS offset-distance - 包含两个元素
以下示例演示了 offset-distance 属性的用法。
<html>
<head>
<style>
.offset-shape {
width: 60px;
height: 60px;
border-radius: 25%;
position: absolute;
}
#shape1 {
offset-path: path("M 20 80 Q 80 10 320 80 T 620 80");
animation: move1 6000ms infinite linear;
background: #2715cf;
}
#shape2 {
offset-path: path("M 50 10 L 320 90 L 10 90 Z");
animation: move2 4500ms infinite alternate ease-in-out;
background: #cf159a;
}
@keyframes move1 {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
@keyframes move2 {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div id="shape1" class="offset-shape"></div>
<div id="shape2" class="offset-shape"></div>
</body>
</html>
