在CSS里用animation 写一个轮播走马灯

以下是一个简单的CSS动画实现的轮播走马灯：

HTML代码：

<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>

CSS代码：

.slider {
  overflow: hidden;
  width: 500px;
  height: 300px;
  position: relative;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  animation: slide 10s linear infinite;
}

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

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 1;
    transform: translateX(-100%);
  }
  45% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0;
    transform: translateX(0);
  }
  70% {
    opacity: 1;
    transform: translateX(0);
  }
  75% {
    opacity: 1;
    transform: translateX(100%);
  }
  95% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}

解释：

- `overflow: hidden` 隐藏滚动条，使图片在容器内滚动。
- `position: relative` 使 `.slider` 容器成为其内部相对定位的参考点。
- `position: absolute` 将图片设置为绝对定位，以使其可以在容器内滚动。
- `opacity` 属性设置图片的透明度。
- `transition` 属性设置图片的渐变效果。
- `animation` 属性将 `slide` 动画应用于图片。
- `@keyframes` 定义 `slide` 动画的关键帧。
- `transform` 属性设置图片的平移动画效果。

该轮播走马灯将在10秒钟内无限循环播放，每张图片的动画持续时间为2.5秒钟。您可以根据需要调整这些值。