如何创建适配多端的无间隙无限滚动自定义Marquee？

核心实现思路 #

要实现无间隙的无限滚动，关键是复制一份滚动内容，让原内容滚动结束时，复制的内容刚好衔接上，通过CSS动画控制整体位移，形成无缝循环效果。

完整代码实现 #

HTML结构

<div class="marquee-container">
  <div class="marquee-content">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
    <img src="image4.jpg" alt="图片4">
  </div>
  <!-- 复制一份内容用于无缝衔接 -->
  <div class="marquee-content">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
    <img src="image4.jpg" alt="图片4">
  </div>
</div>

CSS样式

/* 滚动容器：隐藏溢出内容 */
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* 滚动内容容器：横向排列图片，确保不换行 */
.marquee-content {
  display: inline-flex;
  gap: 1rem; /* 图片之间的间距，可调整 */
  animation: marquee-scroll 20s linear infinite;
}

/* 图片自适应，适配多端 */
.marquee-content img {
  height: 120px; /* 基础高度，可调整 */
  width: auto;
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 核心滚动动画：向左移动单个内容容器的宽度 */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 移动端适配：调整图片大小和动画时长 */
@media (max-width: 768px) {
  .marquee-content img {
    height: 80px;
  }
  .marquee-content {
    animation-duration: 15s;
  }
}

/* 平板适配：微调参数 */
@media (min-width: 769px) and (max-width: 1024px) {
  .marquee-content img {
    height: 100px;
  }
  .marquee-content {
    animation-duration: 18s;
  }
}

关键细节说明 #

• 无间隙原理：两个完全相同的.marquee-content容器并排，动画让整体向左移动100%（即单个容器的宽度），当第一个容器完全滚出视野时，第二个容器刚好接上，形成无限循环。
• 适配多端：通过媒体查询调整图片高度和动画时长，保证不同设备上的滚动体验一致；图片使用width: auto和flex-shrink: 0避免变形。
• 动画控制：linear动画函数保证匀速滚动，infinite设置无限循环，动画时长可根据需求调整（数值越小滚动越快）。

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