嘿，我前阵子刚给公司官网做了一模一样的赞助商滚动组件，纯用HTML+CSS就能搞定，完美适配HTML5，还能实现无限滚动，给你贴个现成的方案，你直接改改就能用：

核心实现思路 #

我们用两个完全相同的赞助商图片列表，通过CSS动画让它们连续向左平移，当第一个列表完全滚出视野时，第二个列表刚好接上，视觉上就形成了无限循环的效果；同时用Flex布局确保所有图片牢牢待在同一行，不会换行。

HTML 结构 #

<!-- 页面底部的赞助商滚动容器 -->
<div class="sponsor-scroller">
  <!-- 滚动轨道1 -->
  <div class="sponsor-track">
    <img src="sponsor1.png" alt="赞助商1" class="sponsor-img">
    <img src="sponsor2.png" alt="赞助商2" class="sponsor-img">
    <img src="sponsor3.png" alt="赞助商3" class="sponsor-img">
    <img src="sponsor4.png" alt="赞助商4" class="sponsor-img">
    <img src="sponsor5.png" alt="赞助商5" class="sponsor-img">
  </div>
  <!-- 滚动轨道2（和轨道1内容完全一致，用于无缝衔接） -->
  <div class="sponsor-track">
    <img src="sponsor1.png" alt="赞助商1" class="sponsor-img">
    <img src="sponsor2.png" alt="赞助商2" class="sponsor-img">
    <img src="sponsor3.png" alt="赞助商3" class="sponsor-img">
    <img src="sponsor4.png" alt="赞助商4" class="sponsor-img">
    <img src="sponsor5.png" alt="赞助商5" class="sponsor-img">
  </div>
</div>

CSS 样式 #

/* 滚动容器：隐藏超出部分，固定在页面底部 */
.sponsor-scroller {
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5; /* 可以改成你页面底部的背景色 */
  padding: 1rem 0;
}

/* 滚动轨道：Flex布局确保图片在同一行，宽度自适应内容 */
.sponsor-track {
  display: flex;
  gap: 2rem; /* 图片之间的间距，可自定义 */
  animation: scroll 20s linear infinite;
}

/* 赞助商图片：统一大小，避免变形 */
.sponsor-img {
  height: 60px; /* 自定义图片高度，宽度会自动按比例缩放 */
  object-fit: contain; /* 保持图片比例，不会拉伸 */
}

/* 无限滚动动画：让轨道向左平移自身宽度的距离 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 可选：鼠标悬停时暂停滚动，方便用户查看赞助商 */
.sponsor-scroller:hover .sponsor-track {
  animation-play-state: paused;
}

关键细节说明 #

• 为什么要两个track？ 单个轨道滚动完后会出现空白，复制一份轨道后，当第一个轨道滚出视野，第二个轨道刚好从右侧进入，实现无缝无限滚动。
• Flex布局确保不换行：display: flex 默认会让子元素在同一行排列，配合overflow: hidden，完美解决你之前“图片不在同一行”的问题。
• 动画调整：你可以修改animation里的20s来控制滚动速度，数值越小滚动越快；如果图片很多，适当增加时长会更流畅。
• 响应式适配：如果需要在移动端调整，加个媒体查询就行，比如：

  @media (max-width: 768px) {
    .sponsor-img {
      height: 40px;
    }
    .sponsor-track {
      gap: 1rem;
      animation-duration: 15s;
    }
  }
  

这个方案完全基于HTML5和现代CSS，不需要依赖旧教程里的过时属性，直接就能用，你试试替换成自己的赞助商图片就能看到效果啦！

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