当前位置：首页 > CSS

纯css制作轮播

2026-02-13 09:40:24CSS

纯CSS制作轮播的方法

方法一：使用CSS动画和关键帧

通过CSS的@keyframes和animation属性实现自动轮播效果。需要为轮播项设置绝对定位，并通过动画控制位置变化。

纯css制作轮播

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

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

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slide 9s infinite;
}

.slide:nth-child(1) { animation-delay: 0s; }
.slide:nth-child(2) { animation-delay: 3s; }
.slide:nth-child(3) { animation-delay: 6s; }

@keyframes slide {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

方法二：使用CSS伪类和`:target`选择器

通过锚点链接和:target选择器实现手动切换轮播效果。点击导航按钮时切换显示的轮播项。

<div class="slider">
  <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="slider-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</div>

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

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.slide:target {
  opacity: 1;
}

方法三：使用CSS Grid和动画

通过CSS Grid布局和动画实现轮播效果。利用transform属性平移轮播容器。

<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: grid;
  grid-template-columns: repeat(3, 100%);
  width: 300%;
  animation: slide 6s infinite;
}

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