CSS - offset-distance 属性

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

可能的值

<length-percentage> - **offset-distance** 属性给出的长度表示元素沿着特定路径移动的距离。

当设置为 100% 时，它反映了 offset-path 指定的整个路径的长度。

应用于

可变换的元素

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

语法

offset-distance = <length-percentage>

CSS offset-distance - 百分比值

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

Open Compiler

       
<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** 属性的用法。

Open Compiler

           
<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>

打印页面