CSS - offset-anchor 屬性

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>

列印頁面