CSS - offset-anchor 属性_CSS 菜鸟教程

CSS 属性 offset-anchor 指定元素框内的位置，该元素充当偏移路径（offset-path）运动的参考点。

元素的动画行为由此属性控制，这对于定义元素的哪一部分沿 offset-path 指定的路线行进至关重要。

可能的值

auto - offset-anchor 属性沿偏移路径对齐元素的移动。它通常匹配 transform-origin，除非 offset-path 为 none，在这种情况下，它与 offset-position 对齐。
<position> - <position>定义了 x/y 坐标，由一到四个值定义，相对于元素的框边界。请注意，只有 background-position 可以使用三值语法。

适用于

可转换元素

语法

offset-anchor = auto | <position>

CSS offset-anchor - 基本示例

下面的示例演示了 offset-anchor 属性的用法。

<html>
<head>
<style>
	 	div {
	 	 	 offset-path: path("M 0,40 L 300,40");
	 	 	 animation: move 4000ms infinite alternate ease-in-out;
	 	 	 width: 80px;
	 	 	 height: 80px;
	 	 	 border-radius: 10%;
	 	}
	 	section {
	 	 	 background-image: linear-gradient(
	 	 	 to bottom,
	 	 	 transparent,
	 	 	 transparent 49%,
	 	 	 #4CAF50 50%,
	 	 	 #4CAF50 51%,
	 	 	 transparent 52% );
	 	 	 border: 2px solid #4CAF50;
	 	 	 margin-bottom: 60px;
	 	 	 width: 700px;
	 	 	 height: 60px;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	}
	 	.offset-anchor1 {
	 	 	 offset-anchor: auto;
	 	 	 background: #2196F3;
	 	}
	 	.offset-anchor2 {
	 	 	 offset-anchor: bottom left;
	 	 	 background: #FF9800;
	 	}
	 	.offset-anchor3 {
	 	 	 offset-anchor: top right;
	 	 	 background: #9C27B0;
	 	}
	 	@keyframes move {
	 	 	 0% {
	 	 	 offset-distance: 50%;
	 	 	 }
	 	 	 50% {
	 	 	 offset-distance: 100%;
	 	 	 }
	 	}
</style>
</head>
<body>
<section>
	 	<div class="offset-anchor1"></div>
</section>
<section>
	 	<div class="offset-anchor2"></div>
</section>
<section>
	 	<div class="offset-anchor3"></div>
</section>
</body>
</html>

CSS offset-anchor - 使用不同的锚点值

以下示例演示了 offset-anchor 属性以及不同定位点值的用法。

<html>
<head>
<style>
	 	div {
	 	 	 offset-path: path("M 0,60 Q 150,0 300,60");
	 	 	 animation: move 5000ms infinite alternate ease-in-out;
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border-radius: 50%;
	 	 	 position: relative;
	 	 	 background-color: #FF6347;
	 	}
	 	section {
	 	 	 background-image: linear-gradient(
	 	 	 to bottom,
	 	 	 transparent,
	 	 	 transparent 49%,
	 	 	 #4682B4 50%,
	 	 	 #4682B4 51%,
	 	 	 transparent 52%
	 	 	 );
	 	 	 border: 2px solid #4682B4;
	 	 	 margin-bottom: 80px;
	 	 	 width: 600px;
	 	 	 height: 100px;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	}
	 	.offsetAnchorA {
	 	 	 offset-anchor: auto;
	 	 	 background: #32CD32;
	 	}
	 	.offsetAnchorB {
	 	 	 offset-anchor: bottom right;
	 	 	 background: #FFD700;
	 	}
	 	.offsetAnchorC {
	 	 	 offset-anchor: top left;
	 	 	 background: #9932CC;
	 	}
	 	@keyframes move {
	 	 	 0% {
	 	 	 	 	offset-distance: 10%;
	 	 	 }
	 	 	 50% {
	 	 	 	 	offset-distance: 50%;
	 	 	 }
	 	 	 100% {
	 	 	 	 	offset-distance: 90%;
	 	 	 }
	 	}
</style>
</head>
<body>
<section>
	 	<div class="offsetAnchorA"></div>
</section>
<section>
	 	<div class="offsetAnchorB"></div>
</section>
<section>
	 	<div class="offsetAnchorC"></div>
</section>
</body>
</html>

<< CSS - object-position 属性 CSS - offset-distance 属性 >>