CSS 属性 offset-position 用于提供元素沿路线的起始位置。
通常与 offset-path 属性结合使用，它会产生运动效果。
如果offset-path函数没有定义自己的起始位置，则使用offset-position来确定元素的初始位置。
一个运动系统，包括与偏移相关的功能，例如 offset-anchor、offset-distance，并且offset-path还包括offset-position属性。
这些特性共同提供了沿着设定路径的各种运动效果。
属性值
offset-position 属性接受以下列表值。
normal - 此选项将元素放置在相对于所包含块的 (50%, 50%) 处，表示它没有初始偏移位置。
auto - 该值表示元素框的左上角是初始偏移位置，默认选项。
<length-percentage> - offset-position 属性使用 x/y 坐标确定元素相对于其框边缘的位置，值范围从 1 到 4 表示水平和垂直位置。。
属性值
可变形元素
语法
offset-position = normal | auto | <position> CSS offset-position: 初始化偏移路径的偏移位置
以下示例演示了 offset-position 属性的用法。
<html>
<head>
<style>
.container {
width: 80%;
height: 400px;
position: relative;
overflow: hidden;
background-color: #c6d8f5;
}
.object {
width: 50px;
height: 50px;
background-color: #1169f7;
position: absolute;
border-radius: 20%;
offset-path: path("M 50, 200 C 50, 100 250, 100 250, 200 S 450, 300 450, 200");
offset-position: top 10%;
animation: moveObject 5s linear infinite;
}
@keyframes moveObject {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="object"></div>
</div>
</body>
</html> CSS offset-position: 比较偏移位置
下面的示例演示了 offset-position 属性的各种偏移位置的用法。
<html>
<head>
<style>
.container {
position: relative;
height: 300px;
background-color: #f0f0f0;
margin: 50px auto;
padding: 20px;
}
.box {
width: 90px;
height: 90px;
background-color: #3477eb;
position: absolute;
border-radius: 40%;
animation: moveObject 5s linear infinite;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: white;
}
@keyframes moveObject {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}
.box-normal::after {
content: "Normal";
}
.box-center::after {
content: "Center";
}
.box-left-top::after {
content: "Left Top";
}
.box-right-bottom::after {
content: "Right Bottom";
}
.box-custom::after {
content: "Custom (30% 70%)";
}
.box-normal {
offset-position: normal;
top: 20px;
left: 20px;
}
.box-center {
offset-position: center;
top: 20px;
left: calc(50% - 25px);
}
.box-left-top {
offset-position: left top;
top: 20px;
left: 20px;
}
.box-right-bottom {
offset-position: right bottom;
bottom: 20px;
right: 20px;
}
.box-custom {
offset-position: 30% 70%;
top: calc(30% - 25px);
left: calc(70% - 25px);
}
</style>
</head>
<body>
<div class="container">
<div class="box box-normal"></div>
<div class="box box-center"></div>
<div class="box box-left-top"></div>
<div class="box box-right-bottom"></div>
<div class="box box-custom"></div>
</div>
</body>
</html>