CSS动画中如何无需创建N个<div>生成N个沿SVG路径运动的点

• 单个点沿SVG <path> 运动
• 动画中的点数量可自定义
• 相邻点间距相等（即运动时间间隔相同）
• 点生成连续无间断

我参考了CSS运动路径的相关教程，已经完成可运行的demo，可自行适配更复杂的运动路径，但当前存在核心问题：若要实现100个、200个点的效果，如何避免手动创建对应数量的HTML <div> 与CSS --delay 变量？

简化需求：现有demo通过6个<div>实现效果，如何将其改造为无需手动编写6个<div>的形式？比如通过变量配置点数量（如设值为6），且点之间的运动延迟间隔可配置。

现有Demo代码 #

CSS 部分 #

svg {
  width: 500px;
}
.wrapper {
  position: relative;
}

:root {
  --delay: 0ms;
  --path: path('m 0 0 h 500');
}

body {
  margin: 0;
  padding: 2rem;
  background-color: #fbfbf4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.obj {
  --color: salmon;
  position: absolute;
  top: 0;
  left: 0;
  offset-path: var(--path);
  animation: move 6000ms infinite linear var(--delay);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color);
}

/* 冗余的手动延迟类 */
.obj--2 { --delay: 1000ms; }
.obj--3 { --delay: 2000ms; }
.obj--4 { --delay: 3000ms; }
.obj--5 { --delay: 4000ms; }
.obj--6 { --delay: 5000ms; }

@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

HTML 部分 #

<div class="wrapper">
  <div class="obj"></div>
  <div class="obj obj--2"></div>
  <div class="obj obj--3"></div>
  <div class="obj obj--4"></div>
  <div class="obj obj--5"></div>
  <div class="obj obj--6"></div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 50">
    <path d="m 0 0 h 500" fill="none" stroke="#5e5e7d" stroke-width="3" stroke-miterlimit="10"/>
  </svg>
</div>

改造方案 #

核心思路是用极少量JavaScript动态生成DOM元素和对应延迟变量，完全替代手动编写的冗余代码，仅需修改两个参数即可控制全部效果。

步骤1：清理冗余CSS #

删掉所有手动写的.obj--2到.obj--6延迟类，仅保留.obj的基础样式即可：

/* 删除以下冗余代码 */
/* .obj--2 { --delay: 1000ms; }
.obj--3 { --delay: 2000ms; }
.obj--4 { --delay: 3000ms; }
.obj--5 { --delay: 4000ms; }
.obj--6 { --delay: 5000ms; } */

步骤2：添加动态生成逻辑 #

在页面底部添加以下JavaScript代码，仅需修改顶部配置区的两个值，即可实现不同点数、不同间隔的效果：

// ===== 配置区：直接修改以下两个值即可 =====
const POINT_COUNT = 6; // 点的总数量，要100个就改成100
const ANIM_DURATION = 6000; // 单个点跑完整个路径的总时长，和CSS中的动画时长保持一致
// ==========================================

const wrapper = document.querySelector('.wrapper');
const dotList = wrapper.querySelectorAll('.obj');
// 先清掉手动写的冗余dot
dotList.forEach(dot => dot.remove());
// 计算相邻点的延迟间隔 = 总时长 / 总点数，保证间距均匀
const DELAY_INTERVAL = ANIM_DURATION / POINT_COUNT;

// 循环生成对应数量的点
for (let i = 0; i < POINT_COUNT; i++) {
  const dot = document.createElement('div');
  dot.className = 'obj';
  // 直接给每个点设置自定义延迟变量，无需写额外CSS类
  dot.style.setProperty('--delay', `${i * DELAY_INTERVAL}ms`);
  // 插入到SVG标签前面
  wrapper.insertBefore(dot, wrapper.querySelector('svg'));
}

效果说明 #

• 调整点数：仅需修改POINT_COUNT的值，哪怕设为200也只会生成对应数量的DOM，无冗余代码
• 调整间隔：要么修改ANIM_DURATION控制整体动画速度，要么修改POINT_COUNT，点数量越多间隔越短，始终保持相邻点间距相等
• 由于动画为无限循环，每个点的延迟均匀分布在总时长内，生成的点会连续无间断覆盖整个路径，不会出现空隙或重叠

内容的提问来源于stack exchange，提问作者azro