当前位置：首页 > CSS

纯css制作幻灯片

2026-02-12 13:53:14CSS

纯CSS制作幻灯片的方法

使用纯CSS制作幻灯片可以通过CSS动画和关键帧实现自动轮播效果。以下是几种常见的方法：

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

通过@keyframes定义动画，结合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: slide 9s infinite;
}

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

.slide2 {
  background: #4ecdc4;
  animation-delay: 3s;
}

.slide3 {
  background: #45aaf2;
  animation-delay: 6s;
}

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

方法二：使用`: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: #ff6b6b; }
#slide2 { background: #4ecdc4; }
#slide3 { background: #45aaf2; }

方法三：使用复选框和`:checked`伪类

通过隐藏的复选框和label标签实现幻灯片切换。

<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"></label>
    <label for="slide2"></label>
    <label for="slide3"></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.333%;
  height: 100%;
}

#slide1:checked ~ .slides {
  transform: translateX(0);
}

#slide2:checked ~ .slides {
  transform: translateX(-33.333%);
}

#slide3:checked ~ .slides {
  transform: translateX(-66.666%);
}

.slide1 { background: #ff6b6b; }
.slide2 { background: #4ecdc4; }
.slide3 { background: #45aaf2; }

.controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.controls label {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}