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>

有需求,欢迎探讨

相关推荐
csj5019 小时前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react
!win !20 小时前
分享二个实用正则
javascript·正则表达式
xw520 小时前
分享二个实用正则
javascript·正则表达式
刘新明198920 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤20 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
言德斐21 小时前
Python Web框架深度对比:Django vs Flask vs FastAPI(含优缺点与选型策略)
前端·python·django
疯狂的沙粒21 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling55521 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
你的电影很有趣21 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节
温宇飞1 天前
浏览器路由系统的一种实践
前端