CSS 实现打字机效果的双向文本轮播（自动切换与回退）-html教程-PHP中文网

css 实现打字机效果的双向文本轮播（自动切换与回退）

使用纯 CSS 实现两个文本在固定时间间隔内交替显示的“打字机式”轮播效果，无需 JavaScript，通过 @keyframes 控制透明度与动画时序，精准完成 2 秒显示、2 秒切换、循环往复。

css 实现打字机效果的双向文本轮播（自动切换与回退）

在网页设计中，常需用简洁方式呈现动态文案切换，例如欢迎语与问候语的交替展示。本文介绍一种纯 CSS 解决方案，实现两个文本（如 "Hello!" 和 "How are you?"）以打字机风格轮流出现：每个文本显示 2 秒 → 淡出 → 另一文本淡入 → 显示 2 秒 → 再次切换，无限循环。

核心思路是：
✅ 利用 opacity 动画模拟“逐字显现”的视觉错觉（实际为整体渐显，但结合时序可营造打字感）；
✅ 通过 animation-delay 错开两个元素的动画起始时间；
✅ 使用 animation-duration: 4s 配合关键帧比例，精确控制各阶段停留时长。

以下是完整可运行代码：



    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Typewriter Effect - Bidirectional Swap</title><style>
        .container {
            text-align: center;
            margin: 2rem auto;
            max-width: 600px;
        }

        .text-animation {
            display: inline-block;
            opacity: 0;
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
            /* 关键：4秒总周期，无限循环，线性过渡 */
            animation: switchText 4s linear infinite;
        }

        @keyframes switchText {
            /* 0%–20%（0–0.8s）：当前元素从透明到完全可见 → 模拟“打出”过程 */
            0%, 20% {
                opacity: 1;
            }
            /* 25%–100%（1s–4s）：快速淡出并保持隐藏，留白期由另一元素填充 */
            25%, 100% {
                opacity: 0;
            }
        }

        /* 第二个文本延迟2秒启动，使其在第一个文本淡出后开始“出现” */
        .text-animation:nth-child(2) {
            animation-delay: 2s;
        }

        /* 响应式优化（可选） */
        @media (max-width: 600px) {
            .text-animation {
                font-size: 1.8rem;
            }
        }
    </style><div class="container">
        <h1 class="text-animation">Hello!</h1>
        <h1 class="text-animation">How are you?</h1>
    </div>

? 关键细节说明：

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

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

下载

.text-animation:nth-child(2) 的 animation-delay: 2s 确保第二条文案在第一条显示 2 秒后才开始其 switchText 动画，从而形成无缝衔接；
@keyframes 中 0%–20% 对应 0.8 秒渐显（增强“打字”节奏感），25% 起立即归零透明度，避免重叠；
若需更逼真的逐字打字效果（非整体淡入），需配合 ch 单位 + width 动画或 JavaScript；但本方案在简洁性、性能与视觉节奏间取得最佳平衡。

? 扩展提示：