css轮播制作教程

2026-04-02 11:21:25CSS

CSS轮播制作方法

使用纯CSS制作轮播图可以通过动画和关键帧实现，无需JavaScript。以下是具体实现步骤：

HTML结构：

<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>

CSS样式：

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

.slides {
  display: flex;
  width: 300%; /* 3张幻灯片 */
  animation: slide 10s infinite;
}

.slide {
  width: 33.33%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.slide:nth-child(1) { background: #ff5252; }
.slide:nth-child(2) { background: #4caf50; }
.slide:nth-child(3) { background: #2196f3; }

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

响应式轮播实现

为适应不同屏幕尺寸，可以添加媒体查询调整轮播样式：

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

添加导航指示器

通过伪元素创建导航点，增强用户体验：

.slider {
  position: relative;
}

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

.slider::after {
  content: "•••";
  letter-spacing: 0.5em;
  color: rgba(255,255,255,0.5);
}

无限循环优化

调整动画关键帧实现更流畅的无限循环效果：

@keyframes slide {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-33.33%); }
  50% { transform: translateX(-66.66%); }
  75% { transform: translateX(-100%); }
}