CSS初级项目如何用transition和transform实现轮播图动画切换

轮播图是前端入门项目中非常常见的功能，使用CSS的transition和transform属性可以轻松实现平滑的动画切换效果，不需要复杂的JavaScript动画逻辑，非常适合CSS初级项目使用。

轮播图基础布局搭建

首先我们需要搭建轮播图的基础HTML结构，核心是一个外层容器用来控制显示区域，内部一个包裹所有轮播项的容器，以及多个轮播项本身。

<div class="carousel">
  <div class="carousel-wrapper">
    <div class="carousel-item">轮播项1</div>
    <div class="carousel-item">轮播项2</div>
    <div class="carousel-item">轮播项3</div>
  </div>
</div>

接下来给布局添加基础CSS样式，外层容器设置固定宽高并隐藏溢出内容，内部的轮播项水平排列，每个轮播项宽度和外层容器一致。

.carousel {
  width: 800px;
  height: 400px;
  overflow: hidden; /* 隐藏超出显示区域的内容 */
  margin: 0 auto;
}

.carousel-wrapper {
  display: flex; /* 让轮播项水平排列 */
  width: 300%; /* 3个轮播项，总宽度为单个的3倍 */
  height: 100%;
}

.carousel-item {
  width: 33.333%; /* 单个轮播项占外层容器的1/3宽度 */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
}

/* 给不同轮播项设置不同背景色方便区分 */
.carousel-item:nth-child(1) {
  background-color: #409eff;
}
.carousel-item:nth-child(2) {
  background-color: #67c23a;
}
.carousel-item:nth-child(3) {
  background-color: #e6a23c;
}

transition和transform实现动画切换

transition属性用来设置过渡动画的时长和缓动函数，transform的translateX函数用来控制元素的水平位移，两者结合就能实现轮播图的平滑切换。

添加过渡效果

给包裹轮播项的carousel-wrapper添加transition属性，让它的transform变化产生过渡动画。

.carousel-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
  /* 设置过渡效果：transform属性变化过渡0.5秒，使用缓动函数 */
  transition: transform 0.5s ease-in-out;
}

控制轮播切换

我们可以通过修改carousel-wrapper的translateX值来切换显示的轮播项，比如显示第2个轮播项时，整体向左移动一个外层容器的宽度，也就是translateX(-100%)。

/* 切换到第2个轮播项 */
.carousel-wrapper.active-1 {
  transform: translateX(-100%);
}

/* 切换到第3个轮播项 */
.carousel-wrapper.active-2 {
  transform: translateX(-200%);
}

如果需要自动轮播，可以配合少量JavaScript来定时切换类名，如果是纯CSS实现，也可以结合:checked伪类和隐藏的单选框实现点击切换。

纯CSS点击切换示例

以下是结合单选框实现点击切换的完整示例，不需要JavaScript就能运行。

<div class="carousel">
  <input type="radio" name="carousel" id="item1" checked class="carousel-radio">
  <input type="radio" name="carousel" id="item2" class="carousel-radio">
  <input type="radio" name="carousel" id="item3" class="carousel-radio">
  <div class="carousel-wrapper">
    <div class="carousel-item">轮播项1</div>
    <div class="carousel-item">轮播项2</div>
    <div class="carousel-item">轮播项3</div>
  </div>
  <div class="carousel-dots">
    <label for="item1" class="dot"></label>
    <label for="item2" class="dot"></label>
    <label for="item3" class="dot"></label>
  </div>
</div>

/* 隐藏单选框 */
.carousel-radio {
  display: none;
}

.carousel {
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.carousel-wrapper {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-item {
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #fff;
}

.carousel-item:nth-child(1) {
  background-color: #409eff;
}
.carousel-item:nth-child(2) {
  background-color: #67c23a;
}
.carousel-item:nth-child(3) {
  background-color: #e6a23c;
}

/* 点击对应单选框时切换轮播位置 */
#item1:checked ~ .carousel-wrapper {
  transform: translateX(0);
}
#item2:checked ~ .carousel-wrapper {
  transform: translateX(-100%);
}
#item3:checked ~ .carousel-wrapper {
  transform: translateX(-200%);
}

/* 轮播指示点样式 */
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

/* 当前激活的指示点样式 */
#item1:checked ~ .carousel-dots label[for="item1"],
#item2:checked ~ .carousel-dots label[for="item2"],
#item3:checked ~ .carousel-dots label[for="item3"] {
  background-color: #fff;
}

注意事项

• transition属性要加在需要产生动画的元素上，也就是carousel-wrapper，不要加在轮播项本身上。
• translateX的百分比是相对于元素自身的宽度，所以carousel-wrapper宽度设置为300%时，translateX(-100%)刚好移动一个外层容器的宽度。
• 如果轮播项数量不固定，需要动态计算carousel-wrapper的宽度和translateX的位移值，这时候可以配合JavaScript动态设置样式。
• 如果需要无限轮播效果，需要在首尾各添加一个克隆的轮播项，切换时通过监听transitionend事件来无感知跳转到对应位置。

CSStransitiontransform轮播图动画切换修改时间：2026-06-18 01:12:56