CSS 属性

元素沿 offset-path 的位置由其 offset-distance CSS 属性确定，该属性指定元素应放置的位置。

可能值

  • <length-percentage>: 元素沿着特定路径行进的距离由offset-distance属性给出的长度表示。

    它反映了offset-path 设置为 100% 时。

适用范围

可变形元素

语法

offset-distance = <length-percentage>

CSS offset-distance 百分比值

以下示例演示 offset-distance 属性的用法。

<html>
<head>
<style>
   #offset-shape {
      offset-path: path("M 10 80 Q 95 10 180 80 T 310 80");
      animation: move 4000ms infinite linear;
      width: 60px;
      height: 40px;
      background: #FFD700;
      border-radius: 50%; 
      position: relative;
   }
   @keyframes move {
      0% {
         offset-distance: 0%;
      }
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
<div id="offset-shape"></div>
</body>
</html>

CSS offset-distance 有两个元素

以下示例演示了 offset-distance 属性的用法。

<html>
<head>
<style>
   .offset-shape {
      width: 60px;
      height: 60px;
      border-radius: 25%; 
      position: absolute;
   }
   #shape1 {
      offset-path: path("M 20 80 Q 80 10 320 80 T 620 80");
      animation: move1 6000ms infinite linear;
      background: #2715cf; 
   }
   #shape2 {
      offset-path: path("M 50 10 L 320 90 L 10 90 Z");
      animation: move2 4500ms infinite alternate ease-in-out;
      background: #cf159a; 
   }
      @keyframes move1 {
         0% {
            offset-distance: 0%;
         }
         100% {
            offset-distance: 100%;
         }
      }
      @keyframes move2 {
         0% {
            offset-distance: 0%;
         }
         100% {
            offset-distance: 100%;
         }
      }
</style>
</head>
<body>
<div id="shape1" class="offset-shape"></div>
<div id="shape2" class="offset-shape"></div>
</body>
</html>