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>

列印頁面