当前位置：首页 > CSS

纯css制作幻灯片

2026-03-31 21:46:19CSS

纯CSS制作幻灯片的方法

利用CSS的动画和过渡特性可以实现简单的幻灯片效果，无需JavaScript。以下是几种常见方法：

关键帧动画实现

通过@keyframes定义动画序列控制幻灯片切换：

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

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

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 4s; }
.slide:nth-child(3) { animation-delay: 8s; }

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

过渡效果实现

结合:hover或:target伪类触发过渡：

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
}

input[type="radio"]:checked ~ .slides {
  transform: translateX(-100%);
}

无限循环轮播

通过延迟动画实现无缝循环：

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.slider {
  animation: slide 10s infinite linear;
}

注意事项

确保容器设置overflow: hidden
图片尺寸需统一避免布局跳动
动画时间根据实际需求调整
移动端需考虑触摸事件兼容性

完整示例通常需要HTML结构配合：

纯css制作幻灯片

<div class="slideshow">
  <div class="slide" style="background:url(1.jpg)"></div>
  <div class="slide" style="background:url(2.jpg)"></div>
  <div class="slide" style="background:url(3.jpg)"></div>
</div>