CSS秘籍：如何轻松实现多张图片的流畅滚动显示？

1. 基本HTML结构

<div id="image-scroll-container">
  <div class="image-scroll">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>

2. CSS样式设置

#image-scroll-container {
  overflow: hidden;
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
}

.image-scroll {
  display: flex;
  width: 1200px; /* 图片总宽度，多张图片宽度之和 */
  animation: scrollImages 10s linear infinite; /* 设置滚动动画 */
}

.image-scroll img {
  width: 300px; /* 单张图片宽度 */
  margin-right: 10px; /* 图片间距 */
}

@keyframes scrollImages {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1200px); /* 图片总宽度 */
  }
}

3. 实现原理

4. 优化与调整

• 图片间距：根据实际需求，调整.image-scroll img中的margin-right值，以控制图片间距。
• 滚动速度：修改@keyframes scrollImages中的动画持续时间，以调整滚动速度。
• 容器尺寸：根据实际需求，调整#image-scroll-container的宽度和高度。