用CSS写一个轮播走马灯

以下是一个基本的CSS轮播走马灯示例：

HTML代码：

<div class="slider">
  <div class="slide"><img src="img1.jpg"></div>
  <div class="slide"><img src="img2.jpg"></div>
  <div class="slide"><img src="img3.jpg"></div>
</div>

CSS代码：

.slider {
  width: 600px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider .slide:first-child {
  opacity: 1;
}

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

.slider.active {
  animation: slide 5s linear infinite;
}

解释：

- `.slider`：轮播容器的样式，设置宽度、高度、定位和溢出隐藏。
- `.slide`：每张幻灯片的样式，设置绝对定位、宽度、高度和透明度，以及过渡效果。`.slide.active`表示当前激活的幻灯片，透明度为1。
- `.slide img`：幻灯片中图片的样式，设置宽度、高度和对象适配。
- `.slider .slide:first-child`：第一张幻灯片默认为激活状态，透明度为1。
- `@keyframes slide`：定义一个滑动的关键帧动画，从左到右移动幻灯片。
- `.slider.active`：当轮播容器被激活时，应用滑动动画，并设置持续时间为5秒和线性缓动函数，以及无限循环。