CSS - offset-position 属性

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>

打印本页