当前位置：首页 > CSS

css如何制作幻灯

2026-03-11 23:21:05CSS

使用纯CSS制作幻灯片

通过CSS的@keyframes和animation属性可以实现简单的幻灯片效果。需要将多个图片叠放在同一位置，通过透明度或位置变化实现切换。

.slideshow-container {
  position: relative;
  height: 400px;
  width: 600px;
  overflow: hidden;
}

.slide {
  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; }
}

HTML结构需包含多个具有slide类的元素，每个元素包含一张图片。

使用CSS过渡效果

通过:hover伪类和过渡属性创建交互式幻灯片。这种方法需要用户悬停触发切换。

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

.slide {
  min-width: 100%;
}

.container:hover .slider {
  transform: translateX(-100%);
}

此方法需要外层容器设置overflow: hidden，内部滑动元素使用flex布局。

响应式幻灯片设计

结合CSS媒体查询确保幻灯片在不同设备上正常显示。设置百分比宽度和自动高度适应各种屏幕尺寸。

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

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

添加导航指示器

使用CSS伪元素创建幻灯片导航点，反映当前活动幻灯片状态。

.indicators {
  text-align: center;
}

.indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
}

.indicator.active {
  background: #333;
}

导航点通常需要配合JavaScript实现点击切换功能。

自动轮播与暂停

通过调整动画属性实现自动播放，:hover伪类添加暂停功能。

.slideshow {
  animation: slide 10s infinite;
}

.slideshow:hover {
  animation-play-state: paused;
}

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

此方法适用于水平滑动的幻灯片布局，关键帧百分比控制切换时机。

css如何制作幻灯