当前位置：首页 > CSS

css制作轮播

2026-02-12 23:16:32CSS

使用纯CSS制作轮播

通过CSS的@keyframes和animation属性可以实现简单的轮播效果。以下是一个基础示例：

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

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

.slide {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

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

添加导航指示器

可以通过伪元素和CSS计数器创建导航点：

.slider {
  position: relative;
}

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

.slider::after {
  counter-reset: dot;
}

.slide::before {
  counter-increment: dot;
  content: counter(dot);
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}

响应式轮播调整

使用媒体查询确保轮播在不同设备上正常显示：

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 150px;
  }

  .slide {
    height: 150px;
    font-size: 18px;
  }
}

添加悬停暂停效果

通过动画的animation-play-state属性实现悬停暂停：

.slides {
  animation: slide 6s infinite;
}

.slider:hover .slides {
  animation-play-state: paused;
}

使用CSS变量控制参数

通过CSS变量方便调整轮播参数：

:root {
  --slide-width: 300px;
  --slide-height: 200px;
  --animation-duration: 6s;
}

.slider {
  width: var(--slide-width);
  height: var(--slide-height);
}

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