当前位置：首页 > CSS

css制作轮播教程

2026-03-12 02:37:17CSS

使用纯CSS制作轮播图

通过CSS的animation和@keyframes实现自动轮播效果。以下是一个基础示例：

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

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

.slides {
  display: flex;
  width: 300%;
  animation: slide 10s infinite;
}

.slide {
  width: 100%;
  height: 200px;
  flex-shrink: 0;
}

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

添加导航指示器

通过:target伪类实现点击导航跳转不同幻灯片：

css制作轮播教程

<div class="slider">
  <div class="slides">
    <div id="slide1" class="slide">Slide 1</div>
    <div id="slide2" class="slide">Slide 2</div>
    <div id="slide3" class="slide">Slide 3</div>
  </div>
  <div class="nav">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
  </div>
</div>

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

.slide {
  width: 100%;
  flex-shrink: 0;
}

.slides:target {
  transform: translateX(-100%);
}

.slides #slide2:target {
  transform: translateX(-200%);
}

响应式轮播设计

使用CSS媒体查询适应不同屏幕尺寸：

css制作轮播教程

.slider {
  width: 100%;
  max-width: 800px;
}

@media (max-width: 600px) {
  .slide {
    height: 150px;
  }
  .slides {
    animation-duration: 8s;
  }
}

添加过渡效果

通过transition属性实现平滑切换：

.slide {
  transition: opacity 0.5s ease;
}

.slides:target .slide {
  opacity: 0;
}

.slides:target .slide:target {
  opacity: 1;
}

无限循环优化

修改关键帧实现无缝循环：

@keyframes slide {
  0% { transform: translateX(0); }
  30% { transform: translateX(-100%); }
  60% { transform: translateX(-200%); }
  90% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

这些方法提供了纯CSS实现轮播图的不同方案，可根据项目需求选择合适的方式或组合使用。CSS轮播适合轻量级需求，如需更复杂交互建议考虑JavaScript方案。