当前位置：首页 > CSS

纯css制作幻灯片

2026-01-08 18:12:04CSS

纯CSS制作幻灯片的方法

使用纯CSS制作幻灯片主要依赖CSS动画和关键帧（@keyframes）技术，结合HTML结构实现轮播效果。以下是两种常见的实现方式：

方法一：使用CSS动画和无限循环

HTML结构：

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

CSS样式：

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

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

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

.slide2 {
  background: #9f9;
  animation-delay: 4s;
}

.slide3 {
  background: #99f;
  animation-delay: 8s;
}

@keyframes slideShow {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

原理：通过@keyframes控制每张幻灯片的透明度变化，利用animation-delay错开播放时间，实现无限循环轮播。

方法二：使用`:target`伪类实现手动切换

HTML结构：

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

  <div class="nav">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
  </div>
</div>

CSS样式：

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

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

.slide:target {
  opacity: 1;
}

.slide1 { background: #ff9; }
.slide2 { background: #9f9; }
.slide3 { background: #99f; }

原理：通过锚点链接（#slide1等）触发:target伪类，配合过渡效果实现手动切换。