CSS 属性

CSS 属性 offset-anchor 指定元素框内的位置,该位置充当偏移路径(offset-path) 移动的参考

元素的动画行为由此属性控制,这对于定义元素的哪一部分沿着 offset-path

属性值

适用范围

可变形元素

语法

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>