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

直接贴代码,留几个参考网址给大家
【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>

有需求,欢迎探讨

相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼8 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping8 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙9 小时前
[译] Composition in CSS
前端·css
白水清风9 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript