用css写一个简单的多个轮播图并排自动播放，图片自动衔接

好的，以下是一个简单的多个轮播图并排自动播放的CSS实现代码：

HTML代码：

<div class="slider-container">
  <div class="slider">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
  </div>
  <div class="slider">
    <img src="img4.jpg" alt="Image 4">
    <img src="img5.jpg" alt="Image 5">
    <img src="img6.jpg" alt="Image 6">
  </div>
  <div class="slider">
    <img src="img7.jpg" alt="Image 7">
    <img src="img8.jpg" alt="Image 8">
    <img src="img9.jpg" alt="Image 9">
  </div>
</div>

CSS代码：

.slider-container {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.slider {
  display: flex;
  width: 100%;
  animation: slide 10s infinite;
}
.slider img {
  width: 100%;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33.33% {
    transform: translateX(-100%);
  }
  66.66% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

解释说明：

1. HTML中使用了一个`.slider-container`容器包含了三个`.slider`轮播容器，每个轮播容器里面包含了三张图片。

2. CSS中使用了`display: flex`实现轮播容器和图片的横向排列，`overflow: hidden`实现轮播容器的溢出隐藏，`width: 100%`实现轮播容器和图片的宽度占满父容器。

3. 使用`animation`属性实现轮播动画，`slide`是动画名称，`10s`是动画时长，`infinite`是动画循环次数，也可以使用`alternate`实现来回循环播放。

4. 使用`@keyframes`定义动画的具体执行过程，`0%`表示动画开始时的状态，`100%`表示动画结束时的状态，中间的百分比表示动画执行时的状态，`transform: translateX(-100%)`实现图片向左平移100%的距离，实现轮播效果。

希望能对你有所帮助！