纯HTML与CSS实现打字机效果：详细步骤与代码解析

效果展示

本文介绍如何仅用HTML和CSS实现经典的打字机效果，最终呈现如下动图所示：文字逐字显示，同时光标闪烁。

实现原理分析

该效果可拆解为三个层次：

• 最底层：静态文字内容。
• 中间层：用于遮挡文字的纯色背景。
• 最上层：闪烁的光标。

文字保持不动，而背景层和光标层以相同速度从左向右移动。初始时，背景完全覆盖文字，光标位于最左侧；动画结束时，背景不再遮挡文字，光标停在最右侧并持续闪烁。

完整代码实现

HTML 结构

<div>hello,world!</div>

CSS 样式与动画

:root {
    /* 字符数量 */
    --steps: 12;
    /* 动画时间 */
    --duration: 2.5s;
    /* 字体大小 */
    --fontSize: 50px;
    /* 光标大小 */
    --cursorSize: 20px;
}

.text {
    color: #333;
    position: relative;
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fontSize);
    line-height: 1;
}

.text::after {
    content: '';
    width: var(--cursorSize);
    height: var(--fontSize);
    background-color: black;
    z-index: 2;
    position: absolute;
    animation: blink 1s var(--duration) step-end infinite,
               moveCursor var(--duration) steps(var(--steps)) forwards;
}

.text::before {
    content: '';
    width: 100%;
    height: var(--fontSize);
    z-index: 1;
    position: absolute;
    background: linear-gradient(#fff, #fff) no-repeat top right;
    animation: showText var(--duration) steps(var(--steps)) forwards;
}

/* 光标闪烁动画 */
@keyframes blink {
    0% { background-color: black; }
    50% { background-color: transparent; }
    100% { background-color: black; }
}

/* 光标移动动画 */
@keyframes moveCursor {
    0% { left: 0%; }
    100% { left: 100%; }
}

/* 背景移动动画 */
@keyframes showText {
    0% { background-size: 100% 100%; }
    100% { background-size: 0% 100%; }
}

关键注意事项

使用此效果时，必须采用等宽字体（如 Courier New），因为光标每次移动的距离是根据字符数量与总宽度的比例计算得出的，等宽字体才能保证每个字符宽度一致，从而精准对齐。

在线演示

您可以在浏览器中直接运行上述代码，查看实际效果。