CSS - offset 属性

CSS 速记属性偏移量使元素更容易沿特定路径进行动画处理。

它具有许多特性，这些特性共同构成了偏移变换。
通过此变换，元素内的指定点（offset-anchor）将与沿路线的各个点（offset-distance）的某个路径位置（offset-position）对齐。
它还允许元素选择性地旋转（offset-rotate）以遵循路径的方向。

成分属性

offset 属性是以下 CSS 属性的简写：

可能的值

以下值列表被 offset 速记属性接受。

offset-anchor - 定义元素内的一个点，该点与路径上的偏移位置对齐。
offset-path - 定义元素动画所遵循的路径。
offset-distance - 定义元素沿路径放置的距离。
offset-rotate - 可以选择旋转元素以与路径的方向对齐。
auto - 所有属性都重置为其默认值。

适用于

可转换元素

语法


offset = [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

CSS offset - 路径值

以下示例演示了 offset 速记属性与路径值的用法。

 	 	
<html>
<head>
<style>
	 	 @keyframes slide {
	 	 	 	 0% {
	 	 	 	 	 	 offset-distance: 0%;
	 	 	 	 }
	 	 	 	 100% {
	 	 	 	 	 	 offset-distance: 100%;
	 	 	 	 }
	 	 }
	 	 .container {
	 	 	 	 width: 400px;
	 	 	 	 height: 200px;
	 	 	 	 border: 2px solid #3498db;
	 	 	 	 border-radius: 10px;
	 	 	 	 position: relative;
	 	 	 	 overflow: hidden;
	 	 	 	 background-color: #f0f0f0;
	 	 	 	 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
	 	 }
	 	 .text {
	 	 	 	 position: absolute;
	 	 	 	 font-size: 28px;
	 	 	 	 color: #3954cc;
	 	 	 	 animation: slide 6s ease-in-out infinite alternate;
	 	 	 	 offset: path('M 10 100 Q 50 50 90 100 T 170 100 T 250 100');
	 	 	 	 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	 	 }
</style>
</head>
<body>
<div class="container">
	 	 <div class="text">This is Sliding Text</div>
</div>
</body>
</html>

CSS offset - 路径和自动值

以下示例演示了 offset 速记属性与 path 和 auto value 的用法。


<html>
<head>
<style>
	 	 @keyframes orbit {
	 	 	 	 0% {
	 	 	 	 	 	 offset-distance: 0%;
	 	 	 	 	 	 offset-rotate: 0deg;
	 	 	 	 }
	 	 	 	 100% {
	 	 	 	 	 	 offset-distance: 100%;
	 	 	 	 	 	 offset-rotate: 360deg;
	 	 	 	 }
	 	 }
	 	 #planet {
	 	 	 	 width: 60px;
	 	 	 	 height: 60px;
	 	 	 	 background-color: #0000A0;
	 	 	 	 border-radius: 50%;
	 	 	 	 position: absolute;
	 	 	 	 animation: orbit 6s linear infinite;
	 	 	 	 offset: path('M 200 200 m -100, 0 a 100,100 0 1,0 200,0 a 100,100 0 1,0 -200,0') auto;
	 	 }
	 	 #sun {
	 	 	 	 width: 100px;
	 	 	 	 height: 100px;
	 	 	 	 background-color: #ffd700;
	 	 	 	 border-radius: 50%;
	 	 	 	 position: absolute;
	 	 	 	 left: 28%;
	 	 	 	 top: 33%;
	 	 	 	 transform: translate(-50%, -50%);
	 	 }
</style>
</head>
<body>
<div id="sun"></div>
<div id="planet"></div>
</body>
</html>

CSS 偏移 - 相关属性

下表列出了与偏移属性相关的属性：

属性	描述
offset-anchor	指定元素框内充当偏移路径的位置。
offset-distance	指定元素的位置。
offset-path	指定元素在其父容器内的路径。
offset-rotate	指定元素沿指定偏移路径移动时的方向或方向。
offset-position	提供元素在路线上的起始位置。

打印本页