css制作幻灯

使用纯CSS制作幻灯片

纯CSS幻灯片通过关键帧动画和HTML结构实现循环播放效果，无需JavaScript。以下是一个基础实现方案：

HTML结构

<div class="slider">
  <div class="slide-track">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS动画

.slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slide-track {
  display: flex;
  width: calc(300px * 3);
  animation: scroll 10s linear infinite;
}

.slide {
  width: 300px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: 1px solid #ddd;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-300px * 3)); }
}

增强交互性的CSS方案

添加悬停暂停和指示器功能：

HTML增强

<div class="slider-container">
  <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" id="slide-1">Content 1</div>
      <div class="slide" id="slide-2">Content 2</div>
      <div class="slide" id="slide-3">Content 3</div>
    </div>

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

CSS增强

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

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

.slide {
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.controls label {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

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

input[type="radio"]:checked + label {
  background: white;
}

自动轮播与手动控制结合

通过CSS变量和动画实现自动切换：

关键CSS代码

:root {
  --slide-count: 3;
  --slide-duration: 3s;
}

.slides {
  animation: slide var(--slide-duration) infinite;
}

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  33.33%, 53.33% { transform: translateX(-33.333%); }
  66.66%, 86.66% { transform: translateX(-66.666%); }
  100% { transform: translateX(0); }
}

input[type="radio"]:checked ~ .slides {
  animation: none;
}

响应式设计调整

添加媒体查询确保不同设备适配：

@media (max-width: 768px) {
  .slider {
    height: 300px;
  }
  .controls label {
    width: 10px;
    height: 10px;
  }
}

以上方案可根据实际需求调整动画时间、过渡效果和样式细节。纯CSS方案适合简单展示场景，如需复杂交互建议结合JavaScript实现。