css 实现轮播图效果

要使用CSS实现轮播图效果，你可以使用以下的基本步骤和代码示例：

1. 创建一个包含图片列表的HTML结构。
2. 使用CSS为图片列表设置样式，使其只显示一张图片。
3. 使用CSS动画或过渡效果来切换显示的图片。

HTML 示例:

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS 示例:

.slider {
  position: relative;
  overflow: hidden;
  height: 400px; /* 设置轮播图容器的高度 */
}
 
.slides {
  width: 300%; /* 图片总宽度 */
  height: 100%;
  display: flex;
  animation: slide 9s infinite; /* 动画名称和持续时间 */
}
 
.slides img {
  width: 33.333%; /* 每张图片的宽度 */
  height: 100%;
  display: block;
}
 
/* 动画定义 */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33.333% {
    transform: translateX(0);
  }
  33.334% {
    transform: translateX(-100%);
  }
  66.667% {
    transform: translateX(-100%);
  }
  66.668% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-200%);
  }
}

这个简单的例子使用了CSS @keyframes 来创建一个无限循环的动画，自动切换到下一张图片。你可以根据需要调整动画的时长和其他属性，以达到所需的轮播图效果。