当前位置：首页 > CSS

css制作动画轮播

2026-04-01 23:08:25CSS

CSS 动画轮播实现方法

方法一：使用 CSS Animation 和 @keyframes

通过 @keyframes 定义动画关键帧，结合 animation 属性实现自动轮播效果。

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

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

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  animation: slide 9s infinite;
}

.slide:nth-child(1) {
  background: red;
  animation-delay: 0s;
}

.slide:nth-child(2) {
  background: green;
  animation-delay: -3s;
}

.slide:nth-child(3) {
  background: blue;
  animation-delay: -6s;
}

@keyframes slide {
  0% { transform: translateX(100%); }
  10% { transform: translateX(0); }
  33.33% { transform: translateX(0); }
  43.33% { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}

方法二：使用 CSS Transition 和 JavaScript 控制

通过 CSS Transition 实现平滑过渡效果，JavaScript 控制轮播逻辑。

<div class="slider">
  <div class="slides-container">
    <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-container {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease;
}

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

.slide:nth-child(1) { background: red; }
.slide:nth-child(2) { background: green; }
.slide:nth-child(3) { background: blue; }

const container = document.querySelector('.slides-container');
let currentIndex = 0;

function nextSlide() {
  currentIndex = (currentIndex + 1) % 3;
  container.style.transform = `translateX(-${currentIndex * 100}%)`;
}

setInterval(nextSlide, 3000);

方法三：纯 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 class="slide">Slide 1</div> <!-- 重复第一个实现无缝衔接 -->
  </div>
</div>

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

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

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

.slide:nth-child(1) { background: red; }
.slide:nth-child(2) { background: green; }
.slide:nth-child(3) { background: blue; }

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

注意事项

css制作动画轮播