css图片循环滚动

你可以使用 CSS 动画和 `@keyframes` 规则来实现图片循环滚动。以下是一个简单的示例：

HTML 代码：

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS 代码：

.image-container {
  overflow: hidden; /* 隐藏超出容器大小的图片 */
  width: 500px; /* 设置容器宽度 */
  height: 300px; /* 设置容器高度 */
}

.image-container img {
  width: 100%; /* 设置图片宽度为容器宽度 */
  height: auto; /* 自适应高度 */
  animation: scroll 10s linear infinite; /* 应用动画 */
}

@keyframes scroll {
  0% {
    transform: translateX(0); /* 图片从左边开始滚动 */
  }
  100% {
    transform: translateX(-1500px); /* 图片向左滚动 1500 像素 */
  }
}

在上面的示例中，我们使用 `translateX()` 函数将图片向左移动。`animation` 属性指定了应用的动画，`scroll` 是动画名称，`10s` 是动画持续时间，`linear` 是动画速度曲线，`infinite` 表示动画应该无限循环播放。在 `@keyframes` 规则中，我们定义了动画的开始和结束状态，即图片从左侧开始滚动，最终滚动到容器的左侧超出范围。