当前位置：首页 > CSS

纯css制作幻灯片

2026-02-26 22:36:07CSS

纯CSS制作幻灯片的方法

使用纯CSS制作幻灯片可以通过CSS动画和关键帧（@keyframes）实现。以下是几种常见的方法：

方法1：使用CSS动画和关键帧

通过定义关键帧动画控制幻灯片切换效果，结合animation属性实现自动轮播。

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

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

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

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

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

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

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

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

通过锚点链接和:target伪类实现手动切换幻灯片。

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

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

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

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

.slide:target {
  opacity: 1;
}

#slide1 { background: red; }
#slide2 { background: green; }
#slide3 { background: blue; }

方法3：使用`input`和`:checked`伪类

通过隐藏的单选按钮和:checked伪类实现幻灯片切换。

<div class="slider">
  <input type="radio" name="slider" id="slide1" checked>
  <input type="radio" name="slider" id="slide2">
  <input type="radio" name="slider" id="slide3">

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

  <div class="controls">
    <label for="slide1">1</label>
    <label for="slide2">2</label>
    <label for="slide3">3</label>
  </div>
</div>

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

input[type="radio"] {
  display: none;
}

.slides {
  width: 300%;
  height: 100%;
  display: flex;
  transition: transform 1s;
}

.slide {
  width: 33.33%;
  height: 100%;
}

#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-33.33%); }
#slide3:checked ~ .slides { transform: translateX(-66.66%); }

.slide1 { background: red; }
.slide2 { background: green; }
.slide3 { background: blue; }