css制作轮播

使用纯CSS制作轮播图

轮播图可以通过CSS的animation和@keyframes实现自动切换效果，结合HTML结构完成基础功能。

HTML结构

<div class="carousel">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

CSS关键代码

.carousel {
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 300%; /* 根据幻灯片数量调整 */
  animation: slide 10s infinite;
}

.slide {
  width: 33.33%; /* 100% / 幻灯片数量 */
  height: 300px;
}

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

添加导航指示器

通过伪元素或额外HTML元素创建轮播图指示点，配合:target选择器实现点击切换。

HTML增强

<div class="indicators">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</div>

CSS增强

.slides {
  scroll-snap-type: x mandatory;
}

.slide {
  scroll-snap-align: start;
}

:target {
  animation: none;
  transform: translateX(var(--target-position));
}

响应式轮播设计

使用CSS媒体查询确保不同设备上的显示效果：

@media (max-width: 768px) {
  .slide {
    height: 200px;
  }
  .slides {
    animation-duration: 7s;
  }
}

交互动画增强

添加过渡效果使滑动更平滑：

.slides {
  transition: transform 0.5s ease-in-out;
}

.slide {
  transition: opacity 0.3s;
}

注意事项

1. 纯CSS轮播无法实现触摸滑动等复杂交互
2. 幻灯片数量变化时需要重新计算宽度和关键帧百分比
3. 考虑添加prefers-reduced-motion媒体查询为动画敏感用户提供替代方案
4. 对于生产环境，建议结合JavaScript实现更完整的控制功能