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>

打印页面