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

元素在 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>

<< CSS - offset-anchor 属性 CSS - offset-path 属性 >>