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>

有需求,欢迎探讨

相关推荐
PFinal社区_南丞19 分钟前
现代CSS开发环境搭建
css
Keepreal49619 分钟前
pdf文件预览实现
javascript·react.js
IT_陈寒20 分钟前
Python性能优化:用这5个鲜为人知的内置函数让你的代码提速50%
前端·人工智能·后端
PFinal社区_南丞21 分钟前
容器查询 - 组件级响应式设计
css
简小瑞21 分钟前
VSCode源码解密:一行代码解决内存泄漏难题
前端·设计模式·visual studio code
邢行行22 分钟前
Node.js 核心模块与模块化笔记
前端
Asort22 分钟前
JavaScript设计模式(九)——装饰器模式 (Decorator)
前端·javascript·设计模式
Man23 分钟前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
接着奏乐接着舞。24 分钟前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
小小前端_我自坚强24 分钟前
2025WebAssembly详解
前端·设计模式·前端框架