CSS 实现多文本轮播式逐个上浮淡入动画教程-html教程-PHP中文网

CSS 实现多文本轮播式逐个上浮淡入动画教程

本文详解如何仅用 html 和 css 实现多个文本在固定位置依次执行“上浮进入→完全显示→下移淡出”的循环轮播动画，确保无缝衔接、无重叠、无错位。

本文详解如何仅用 html 和 css 实现多个文本在固定位置依次执行“上浮进入→完全显示→下移淡出”的循环轮播动画，确保无缝衔接、无重叠、无错位。

要实现多个文本（如 “UTILISATION ILLIMITÉE”、“SANS CONTACT” 等）在同一容器内、同一位置，以统一动效风格逐个浮现并轮播，关键在于精准控制 @keyframes 的时间分段与 animation-delay 的协同逻辑——而非简单复用相同持续时间的动画。

✅ 核心原理：12 秒总周期 × 4 项文本 = 完美轮播

假设共 4 个文本项，每项需独占 3 秒可见期（含入场、高光、退场），其余 9 秒完全隐藏，则整个动画周期应为 4 × 3s = 12s。每项通过 animation-delay 错开 3 秒启动，形成接力效果：

第 1 项：delay: 0s → 在 0–3s 段活跃
第 2 项：delay: 3s → 在 3–6s 段活跃
第 3 项：delay: 6s → 在 6–9s 段活跃
第 4 项：delay: 9s → 在 9–12s 段活跃

因此，单个文本的 @keyframes 必须在其 自身 12 秒生命周期内完成全部动作：

0%：起始状态（完全透明 + 下移 100%）
12.5%（即 1.5s 处）：到达顶部、完全不透明（视觉峰值）
25%（即 3s 处）：回归透明 + 下移，彻底退出视野
25%–100%：全程保持隐藏（不参与动画）

对应的关键帧定义如下：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@keyframes coolAnimation {
  0%, 25% {
    opacity: 0;
    transform: translateY(100%);
  }
  12.5% {
    opacity: 1;
    transform: translateY(0);
  }
}

✅ 布局要点：绝对定位 + 隐藏溢出

为避免文本堆叠或高度塌陷，必须将所有 .coolText 设为 position: absolute，并统一锚定于容器顶部（默认 top: 0），同时确保父容器 #textContainer 启用 overflow: hidden：

#textContainer {
  position: relative;
  overflow: hidden; /* 关键：裁剪移出区域 */
  height: 120px; /* 建议显式设高，避免布局抖动 */
}

.coolText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-family: 'Myriad Pro', Arial, sans-serif;
  animation: coolAnimation 12s ease-in-out infinite;
}

⚠️ 注意：原代码中存在拼写错误 roverflow: hidden 应修正为 overflow: hidden；另建议补充 height 或 min-height 防止容器坍缩导致动画不可见。

✅ 完整可运行示例



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cool Text Animation</title><style>
    @keyframes coolAnimation {
      0%, 25% {
        opacity: 0;
        transform: translateY(100%);
      }
      12.5% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    #textContainer {
      position: relative;
      overflow: hidden;
      height: 120px;
      margin: 2rem auto;
      max-width: 600px;
    }

    .coolText {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 0;
      font-size: 40px;
      line-height: 1.2;
      color: #000;
      font-family: 'Myriad Pro', Arial, sans-serif;
      animation: coolAnimation 12s ease-in-out infinite;
    }

    .coolText:nth-child(1) { animation-delay: 0s; }
    .coolText:nth-child(2) { animation-delay: 3s; }
    .coolText:nth-child(3) { animation-delay: 6s; }
    .coolText:nth-child(4) { animation-delay: 9s; }
  </style><div id="textContainer">
    <h3 class="coolText">UTILISATION<br>ILLIMITÉE</h3>
    <h3 class="coolText">SANS<br>CONTACT</h3>
    <h3 class="coolText">SANS<br>ABONNEMENT</h3>
    <h3 class="coolText">ECO-<br>RESPONSABLE</h3>
  </div>