CSS 属性 offset-position 用于提供元素在路线上的起始位置。
- 它通常与 offset-path 属性结合使用，可产生运动效果。
- 如果 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>
