当前位置：首页 > CSS

css制作幻灯

2026-01-28 04:54:44CSS

使用纯CSS制作幻灯片

通过CSS动画和关键帧可以实现简单的幻灯片效果。以下是一个基础的实现方法：

HTML结构：

<div class="slideshow">
  <div class="slide"></div>
  <div class="slide"></div>
  <div class="slide"></div>
</div>

CSS样式：

css制作幻灯

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

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  animation: slide 12s infinite;
}

.slide:nth-child(1) {
  background-image: url(image1.jpg);
  animation-delay: 0s;
}

.slide:nth-child(2) {
  background-image: url(image2.jpg);
  animation-delay: 4s;
}

.slide:nth-child(3) {
  background-image: url(image3.jpg);
  animation-delay: 8s;
}

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

使用CSS和HTML checkbox实现交互式幻灯片

通过隐藏的radio按钮和:checked伪类可以实现用户控制的幻灯片：

HTML结构：

css制作幻灯

<div class="slideshow">
  <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"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>

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

CSS样式：

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

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

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

.slide {
  width: 33.33%;
  height: 100%;
  background-size: cover;
}

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

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

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

.controls label {
  position: absolute;
  bottom: 10px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.controls label:nth-child(1) {
  left: 45%;
}

.controls label:nth-child(2) {
  left: 50%;
}

.controls label:nth-child(3) {
  left: 55%;
}

优化幻灯片过渡效果

为幻灯片添加平滑的过渡效果可以提升用户体验：

.slide {
  transition: opacity 1s ease-in-out;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

input[type="radio"]:checked + .slide {
  opacity: 1;
  z-index: 1;
}

响应式幻灯片设计

确保幻灯片在不同设备上都能正常显示：

.slideshow {
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16/9;
}

@media (max-width: 768px) {
  .slideshow {
    height: 200px;
  }

  .controls label {
    width: 8px;
    height: 8px;
  }
}

这些方法提供了从简单到交互式的CSS幻灯片实现方案，可以根据具体需求选择合适的实现方式。