css实现多张图循环横向滚动

要实现多张图的循环横向滚动，你可以使用CSS的`flexbox`布局和`@keyframes`动画实现。下面是一个简单的例：

HTML：

<div class="scroll">
  <div class="scroll-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 添加更多的图片 -->
  </div>
</div>

CSS：

.scroll-container {
  overflow: hidden;
}

.scroll-content {
  display: flex;
  animation: scroll 10s infinite linear;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

img {
  flex: 0 0 100%;
}

在上面的示例中，我们首先创建一个包含图片的`scroll-content`容器，并将其放置在一个带有`scroll-container`类的父容器中。通过设置父容器的`overflow`属性为`hidden`，我们可以隐藏超出容器范围的内容。

然后，我们使用`display: flex`将图片水平排列，并使用`@keyframes`定义了一个名为`scroll`的动画。这个动画在10秒钟内以线性方式无限循环滚动。在动画的关键帧中，我们使用`transform: translateX(-100%)`将图片向左平移100%，实现了横向滚动的效果。

最后，我们使用`flex: 0 0 100%`将每个图片的宽度设置为容器的宽度，使它们平分容器的空间。

通过使用上述CSS代码，你可以实现多张图片的循环横向滚动效果。记得将`img`标签中的`src`属性替换为实际的图片路径。