用html+css写一个banner轮播图

好的，以下是一个简单的 HTML + CSS 实现轮播图的代码：

HTML 代码：

<div class="banner">
  <div class="slide">
    <img src="1.jpg" alt="Slide 1">
  </div>
  <div class="slide">
    <img src="2.jpg" alt="Slide 2">
  </div>
  <div class="slide">
    <img src="3.jpg" alt="Slide 3">
  </div>
</div>

CSS 代码：

.banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
}

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

.slide.active {
  opacity: 1;
}

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

/* 添加动画效果 */
@keyframes slide {
  0% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }
  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
}

.slide {
  animation: slide 12s infinite;
}

.slide:nth-child(2) {
  animation-delay: 4s;
}

.slide:nth-child(3) {
  animation-delay: 8s;
}

这个例子中，我们使用了 `position: absolute` 和 `opacity` 属性来实现轮播图的切换效果，使用 `@keyframes` 来定义动画效果。当然，这只是最简单的实现方式，你可以根据自己的需求和喜好来定制不同的效果。