JavaScript 用纯 CSS 打造流畅的打字机动画-小林博客

你或许见过这样的动态文本效果：文字像打字机一样逐个字母弹出，稍作停顿后又像被删除键清除，接着换成新的词汇重复这一过程。这种灵动的动画能让静态页面瞬间鲜活起来，但你可能不知道，实现它根本不需要 JavaScript —— 纯 CSS 就能搞定。

JavaScript 用纯 CSS 打造流畅的打字机动画

打字机动画的核心原理

这种动画的核心逻辑其实很简单，拆解后包含几个关键步骤：

从一段基础文本开始（比如 “我是小明，一名____设计师”）；
在文本的空白位置（示例中 “____” 处），逐个字母 “输入” 第一个关键词（如 “UI”）；
完整显示关键词后，暂停 1-2 秒；
按相反顺序 “删除” 这个词，回到空白状态；
对下一个关键词（如 “产品”）重复 “输入 – 暂停 – 删除” 的过程；
最后一个词不删除，保持显示状态。

同时，文本末尾会有一个闪烁的 “光标”（类似打字时的竖线），增强打字机的真实感。

第一步：用 CSS 实现闪烁光标

光标是打字机动画的 “灵魂细节”，它的实现堪称 CSS 动画的入门练习。我们可以用伪元素和关键帧动画轻松搞定。

1. 绘制光标

光标本质是一条竖线，我们可以通过 ::after 伪元素在文本末尾添加它：

1
2
3
4
5

.typewriter-text::after {
content: ""; /* 伪元素必须设置content才会显示 */
border-right: 2px solid #333; /* 2px粗的黑色竖线 */
margin-left: 3px; /* 与文本保持一点距离 */
}

2. 让光标 “闪烁” 起来

CSS 动画的核心是 “关键帧”—— 定义动画在不同时间点的状态。光标需要在 “显示” 和 “隐藏” 之间切换，opacity（透明度）属性是绝佳选择：

1
2
3
4
5
6
7
8
9
10
11

/* 定义闪烁关键帧 */
@keyframes blink {
0%, 100% { opacity: 1; } /* 开始和结束时完全显示 */
50% { opacity: 0; } /* 中间时刻完全隐藏 */
}/* 应用动画到光标 */
.typewriter-text::after {
animation: blink 0.6s linear infinite;
/* 0.6s完成一次闪烁，匀速播放，无限循环 */
}

这样，一条每秒闪烁约 1.7 次的光标就完成了。

第二步：实现文本的 “输入 – 删除” 动画

文本动画的核心是通过::before伪元素动态改变content属性 —— 在不同时间点显示关键词的不同字母组合，模拟 “输入” 和 “删除” 的过程。

1. 基础 HTML 结构

先准备一段包含 “空白位置” 的文本，用<span>标记动画区域：

1
2
3

2. 静态样式设置

给文本添加基础样式，让整体更协调：

1
2
3
4
5
6

.sentence {
font-size: 24px;
font-family: "Courier New", monospace; /* 等宽字体更像打字机效果 */
text-align: center;
margin: 50px auto;
}

3. 单个词的 “输入” 动画

以关键词 “UI”（2 个字母）为例，我们需要让它从空值逐步变成完整单词。关键帧的时间点需按字母数量拆分：

总动画时长设为 4 秒（可自定义）；
2 个字母意味着分 3 个阶段（空→1 个字母→2 个字母）；
每个阶段占比：100% ÷ 3 ≈ 33.3%。

关键帧代码如下：

1
2
3
4
5
6
7
8
9
10

@keyframes type-ui {
0% { content: ""; } /* 初始为空 */
33.3% { content: "U"; } /* 1/3时间点显示第一个字母 */
100% { content: "UI"; } /* 结束时显示完整单词 */
}.typewriter-text::before {
content: "";
animation: type-ui 4s 1 forwards; /* 4秒完成，播放1次，停在最后一帧 */
}

此时，文本会从 “我是小明，一名设计师” 逐渐变成 “我是小明，一名 UI 设计师”。

4. 加入 “删除” 和 “暂停” 效果

要让单词在显示后被 “删除”，只需在关键帧中反向重复 “输入” 步骤，并在中间加入停顿。仍以 “UI” 为例，总时长设为 8 秒（输入 2 秒 + 暂停 2 秒 + 删除 2 秒 + 缓冲 2 秒）：

1
2
3
4
5
6
7
8
9
10
11
12

@keyframes type-delete-ui {
0% { content: ""; }
12.5% { content: "U"; } /* 1秒时输入第一个字母 */
25% { content: "UI"; } /* 2秒时输入完成 */
50% { content: "UI"; } /* 2-4秒暂停（占25%时长） */
62.5% { content: "U"; } /* 5秒时开始删除第一个字母 */
75%, 100% { content: ""; } /* 6秒时删除完成，保持空白 */
}.typewriter-text::before {
animation: type-delete-ui 8s 1 forwards;
}

5. 多单词循环动画

如果需要切换多个单词（如 “UI→产品→交互”），需按单词总长度和停顿时间计算关键帧占比。公式如下：

总步骤 =（前 n-1 个单词的字母数 ×2）+ 1 + 最后 1 个单词的字母数（×2 是因为每个词要 “输入 + 删除”，+1 是词间停顿）；
总时长 = 总步骤 × 每个字母的动画时间 + 总停顿时间。

例如，3 个单词 “UI”（2 字母）、“产品”（2 汉字）、“交互”（2 汉字）：

总步骤 =（2+2）×2 + 1 + 2 = 13；
若每个字母动画 0.5 秒，停顿 1 秒，总时长 = 13×0.5 + 2×1 = 8.5 秒。

按此计算关键帧时间点，即可实现多词循环。

为什么纯 CSS 比 JavaScript 更值得选？

或许你会疑惑：用 JS 不是更灵活吗？但纯 CSS 方案的优势很明显：

零依赖：无需编写 JS 代码或引入第三方库（如 Anime.js），减少页面加载负担；
兼容性更强：部分用户可能因浏览器设置、防火墙等禁用 JS，而 CSS 几乎不会被屏蔽；
更稳定：CSS 动画由浏览器原生渲染，性能优于 JS 模拟的动画，不易出现卡顿。

当然，它也有小缺点：添加或修改单词时，需要重新计算关键帧时间点（可通过工具自动生成解决）。

用纯 CSS 实现打字机动画，本质是通过伪元素动态改变内容，配合关键帧控制时间节奏。从闪烁的光标到单词的 “输入 – 删除”，每一步都能通过基础 CSS 语法完成。这种方案轻量、稳定，还能兼容更多场景 —— 下次想给网站加动态文本时，不妨试试这个纯 CSS 方案。

JavaScript 用纯 CSS 打造流畅的打字机动画

打字机动画的核心原理