如何用CSS实现打字机效果替换文本并循环切换？

完全可以用纯CSS实现你要的效果，核心靠CSS动画控制文本的显示/隐藏，结合clip-path实现逐字打字机效果，再通过动画时长和延迟实现循环切换。

以下是完整的可运行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typewriter effect</title>
    <style>
        .container {
            position: relative;
            /* 固定容器宽度，防止文本切换时布局跳动 */
            width: 220px;
        }

        h1 {
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            /* 用多边形裁剪实现打字机的逐字显示/隐藏 */
            clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            animation-fill-mode: forwards;
            white-space: nowrap;
        }

        .first-text {
            /* 初始状态显示第一个文本 */
            opacity: 1;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            /* 第一个文本的完整循环动画：显示→隐藏→显示 */
            animation: firstCycle 8s infinite;
        }

        .second-text {
            /* 延迟2秒启动第二个文本的动画，和第一个文本的隐藏动作同步 */
            animation: secondCycle 8s infinite 2s;
        }

        /* 第一个文本的动画时间线（总时长8秒）：
           0-2秒：保持显示
           2-3秒：打字机式隐藏
           3-6秒：完全隐藏
           6-7秒：打字机式显示
           7-8秒：保持显示，然后循环
        */
        @keyframes firstCycle {
            0%, 25% {
                opacity: 1;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            37.5% {
                opacity: 1;
                clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            }
            37.6%, 87.5% {
                opacity: 0;
            }
            100% {
                opacity: 1;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }

        /* 第二个文本的动画时间线（总时长8秒）：
           0-2秒：完全隐藏
           2-3秒：打字机式显示
           3-5秒：保持显示
           5-6秒：打字机式隐藏
           6-8秒：完全隐藏，然后循环
        */
        @keyframes secondCycle {
            0% {
                opacity: 0;
            }
            12.5% {
                opacity: 1;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            37.5% {
                opacity: 1;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
            50% {
                opacity: 1;
                clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
            }
            50.1%, 100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="first-text">Hello!</h1>
        <h1 class="second-text">How are you?</h1>
    </div>
</body>
</html>

调整技巧： #

• 要是想修改文本的显示时长，比如改成每个文本显示3秒，只需要把总动画时长改成10秒，然后按比例调整关键帧的百分比就行。
• 如果文本长度不一样，记得调整容器的width，避免文本换行破坏打字机效果。
• 要是觉得打字机速度太快或太慢，可以修改关键帧之间的时间间隔，比如把隐藏/显示的阶段从1秒改成0.5秒，对应调整百分比。

内容的提问来源于stack exchange，提问作者pixelhy