css如何制作幻灯

使用纯CSS制作幻灯片

纯CSS幻灯片依赖于CSS动画和关键帧技术，无需JavaScript即可实现自动轮播效果。

HTML结构

<div class="slider">
  <div class="slide">内容1</div>
  <div class="slide">内容2</div>
  <div class="slide">内容3</div>
</div>

CSS动画实现

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

.slide {
  width: 100%;
  float: left;
  animation: slide 9s infinite;
}

@keyframes slide {
  0%, 30% { transform: translateX(0); }
  33%, 63% { transform: translateX(-100%); }
  66%, 96% { transform: translateX(-200%); }
}

结合CSS伪类实现交互控制

通过:hover或:checked伪类可以增加用户控制功能。

HTML添加单选框控制

<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<div class="slider">
  <label for="slide1" class="slide">内容1</label>
  <label for="slide2" class="slide">内容2</label>
</div>

CSS关联单选框状态

.slide {
  transition: transform 0.5s;
}

#slide2:checked ~ .slider .slide {
  transform: translateX(-100%);
}

响应式幻灯片设计

使用CSS媒体查询确保在不同设备上正常显示。

@media (max-width: 768px) {
  .slider {
    height: 200px;
  }
  .slide {
    font-size: 14px;
  }
}

视觉增强技巧

通过CSS渐变和阴影提升视觉效果：

.slide {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}