css3制作轮播图

CSS3制作轮播图的方法

使用纯CSS3制作轮播图可以通过动画和关键帧实现，无需JavaScript。以下是实现步骤：

HTML结构

<div class="slider">
  <div class="slide slide1"></div>
  <div class="slide slide2"></div>
  <div class="slide slide3"></div>
</div>

CSS样式

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

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: slide 12s infinite;
  opacity: 0;
}

.slide1 {
  background: red;
  animation-delay: 0s;
}

.slide2 {
  background: green;
  animation-delay: 4s;
}

.slide3 {
  background: blue;
  animation-delay: 8s;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  33% {
    opacity: 1;
  }
  43% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

实现原理

通过CSS3的@keyframes定义动画，控制每张幻灯片的透明度变化。设置不同的animation-delay实现顺序播放效果。

overflow: hidden确保容器外内容不可见，position: absolute让幻灯片重叠在一起。动画时间分配为每个幻灯片显示4秒（33%的12秒总时长）。

响应式调整

为适应不同屏幕尺寸，可以添加媒体查询：

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 150px;
  }
}

自动无限循环

通过设置animation-iteration-count: infinite实现无限循环播放。调整@keyframes中的百分比可以改变切换速度和停留时间。

这种方法适合简单的展示需求，如需交互功能（如手动切换）则需要结合JavaScript实现。