css 实现在一条线上流动小物体（offset-path）

Li_Ning212024-12-11 16:33

直接贴代码，留几个参考网址给大家
【SVG】路径＜Path＞标签详解，一次搞懂所有命令参数
 探秘神奇的运动路径动画 Motion Path

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .mainater {
      width: 200px;
      height: 200px;
    }
    .g-svg {
        position: absolute;
        /* top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); */
    }
    .g-wrap {
        position: relative;
        width: 200px;
        height: 200px;
        margin: auto;
    }
    .ball {
        position: aboslute;
        width: 6px;
        height: 4px;
        /* clip-path: polygon(0 0, 100% 50%, 0 100%); */
        offset-path: path('M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200');
        background: #0AC185FF;
        animation: move 3000ms infinite linear;
    }
    @keyframes move {
        0% {
            offset-distance: 0%;
        }
        100% {
            offset-distance: 100%;
        }
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="mainater">
    <div style="scale: 1;">
      <svg class="g-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <path d="M 0 0 L 0 100 L 0 180 S 1 198 20 200 L 100 200 L 200 200" stroke="#0AC185FF" fill="none" stroke-width="2"/>
      </svg>
      <div class="g-wrap">
          <div class="ball"></div>
      </div>
    </div>
  </div>
</body>
</html>

有需求，欢迎探讨