如何用JS生成不同颜色Div并实现无限滚动跑马灯动画？

一、生成背景色各不相同的box元素 #

可以通过HSL颜色模式按色相均匀分配颜色，既保证颜色不重复，又能得到视觉上区分明显的色彩。HSL的色相值范围是0-360，9个元素的话，每个元素的色相间隔为360/9=40，直接计算即可，无需额外去重逻辑。

代码示例：

<div id="wrapper"></div>

<style>
.box {
  width: 100px;
  height: 100px;
  margin: 0 5px;
  /* 后续跑马灯需要横向排列 */
  display: inline-block;
}
</style>

<script>
const wrapper = document.getElementById('wrapper');
const boxCount = 9;

for (let i = 0; i < boxCount; i++) {
  const box = document.createElement('div');
  box.className = 'box';
  // 按色相均匀分配颜色，确保每个box背景色唯一
  const hue = i * (360 / boxCount);
  box.style.backgroundColor = `hsl(${hue}, 70%, 60%)`;
  wrapper.appendChild(box);
}
</script>

二、实现无限循环跑马灯动画 #

核心思路是复制一份相同的box元素序列，配合CSS平移动画实现无缝滚动：当第一组元素完全滚出视野时，复制的第二组刚好接上，动画重置时用户无感知。

完整整合代码 #

<div id="wrapper"></div>

<style>
#wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
}

.box {
  width: 100px;
  height: 100px;
  margin: 0 5px;
  display: inline-block;
}

/* 跑马灯核心动画：向左平移自身半宽（因为复制了一份元素） */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.marquee-group {
  display: inline-block;
  animation: marquee 15s linear infinite; /* 15s为滚动时长，可按需调整 */
}
</style>

<script>
const wrapper = document.getElementById('wrapper');
const boxCount = 9;
// 创建容器包裹box，方便统一控制动画
const marqueeGroup = document.createElement('div');
marqueeGroup.className = 'marquee-group';
wrapper.appendChild(marqueeGroup);

// 生成带不同背景色的box
for (let i = 0; i < boxCount; i++) {
  const box = document.createElement('div');
  box.className = 'box';
  const hue = i * (360 / boxCount);
  box.style.backgroundColor = `hsl(${hue}, 70%, 60%)`;
  marqueeGroup.appendChild(box);
}

// 复制一份box组，实现无缝滚动衔接
const clonedGroup = marqueeGroup.cloneNode(true);
wrapper.appendChild(clonedGroup);
</script>

关键细节 #

• 动画平移距离设为-50%：因为复制了一份元素，总宽度是原容器的2倍，平移50%刚好让第一组完全移出视野，第二组无缝接上；
• 使用linear动画曲线：保证滚动速度均匀无卡顿；
• 调整滚动方向：只需把translateX(-50%)改为translateX(50%)，同时交换动画起始/结束状态即可。

内容的提问来源于stack exchange，提问作者Dinesh Chandra Pandey