如何为Bootstrap轮播组件的文字添加淡入淡出等过渡效果

云原生阿岚

2026-9-28

实现Bootstrap轮播文字过渡动画的方法

Bootstrap轮播默认仅对轮播项容器设置了位移过渡，内部文字没有额外动画效果，我们可以通过自定义CSS结合轮播的状态类实现文字过渡，操作如下：

操作步骤

给轮播项内的文字元素添加自定义类carousel-text，方便样式选中
修改后的轮播项结构示例：

<div class="carousel-item active first1">
  <div class="text-center">
    <p class="carousel-text">hello1</p>
  </div>
</div>
<div class="carousel-item first">
  <div class="text-center">
    <p class="carousel-text">hello2</p>
  </div>
</div>
<div class="carousel-item second">
  <div class="text-center">
    <p class="carousel-text">hello3</p>
  </div>
</div>

在CSS文件中添加文字过渡样式，和轮播默认过渡时长保持同步：

/* 文字过渡样式 */
.carousel-text {
  opacity: 0;
  /* 初始位置：向下偏移20px，切换时会上滑到位 */
  transform: translateY(20px);
  /* 过渡时长和Bootstrap4轮播默认的0.6s保持一致 */
  transition: all 0.6s ease;
}
/* 轮播项激活时文字的最终状态 */
.carousel-item.active .carousel-text {
  opacity: 1;
  transform: translateY(0);
}

/* 原有样式保留，可补充高度、文字样式避免轮播跳动 */
.first1,.second,.first{
  background-color: teal;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}