CSS - offset-position 属性

CSS 属性offset-position用于指定元素沿着路径的起始位置。

它通常与offset-path属性结合使用，以创建运动效果。
如果offset-path函数没有定义其自身的起始位置，则使用offset-position来确定元素的初始位置。
包含与偏移相关的功能（如offset-anchor、offset-distance和offset-path）的运动系统也包含offset-position属性。
这些属性一起提供了沿着指定路径的各种运动效果。

可能的值

offset-position属性接受以下值列表。

normal - 此选项将元素放置在相对于包含块的 (50%, 50%) 位置，表示它没有初始偏移位置。
auto - 此值表示元素盒的左上角是初始偏移位置，这是默认选项。
<length-percentage> - offset-position 属性使用 x/y 坐标来确定元素相对于其盒边缘的位置，值范围从一到四，分别表示水平和垂直位置。

应用于

可变换元素

语法

offset-position = normal | auto | <position>

CSS offset-position - 初始化 offset-path 的 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>

打印页面