✍️ 纯 CSS 实现打字效果（无需 JavaScript）
在前端开发中，实现打字机效果（Typing Effect）是一个非常常见但有趣的交互动画。传统方式多依赖 JavaScript 的定时器来控制文字一个字一个字地显示，其实，纯 CSS 就可以轻松实现类似打字的动画效果，而且还带有光标闪烁效果。
本文将介绍如何使用纯 CSS 实现打字效果，无需一行 JavaScript。
💻 核心代码实现
HTML 结构
<div class="typing-demo-wrapper">
<div class="typing-demo">
你好；欢迎来到程序员茄子的博客
</div>
</div>
CSS 样式
.typing-demo-wrapper {
height: 200px;
overflow: auto;
}
.typing-demo {
width: 26ch; /* 宽度设置为字符单位，控制打字范围 */
animation: typing 3s steps(13), blink 0.5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid red; /* 光标效果 */
font-size: 2em;
}
/* 打字关键帧动画 */
@keyframes typing {
from {
width: 0;
}
}
/* 光标闪烁动画 */
@keyframes blink {
50% {
border-color: transparent;
}
}
🎯 技术原理解析
width: 26ch：使用字符单位ch设定容器最大宽度，方便精确控制每个字符显示；animation: typing 3s steps(13)：打字动画耗时 3 秒，共分 13 步（即 13 个字符）；overflow: hidden + white-space: nowrap：隐藏溢出内容，并保持文字在一行；border-right：模拟打字机光标；blink动画：通过改变border-color实现光标闪烁。
🔧 可配置建议
| 参数 | 作用 | 示例 |
|---|---|---|
steps(n) | 控制字数 | steps(13) 表示 13 字 |
animation-duration | 动画持续时间 | 3s 表示 3 秒完成打字 |
border-color | 光标颜色 | red 可改为 #333 |
font-size | 字体大小 | 自行调整适配页面 |
🧪 实战 Tips
ch是基于字体的单位，1ch ≈ 一个 "0" 字符的宽度，使用它来控制字数特别精准；- 使用
steps()可以让每一步对应一个字符显示，避免线性动画带来的“卡顿感”； - 多段文字打字效果可通过多个
.typing-demo组合使用。
🧱 小结
- ✅ 无需 JS，纯 CSS 实现；
- ✅ 可配置性强，支持文字数量与时间自定义；
- ✅ 可作为博客签名、欢迎页引导动画、404 页面等使用。
📎 拓展玩法（进阶可考虑）
- 多段分步打字（多个元素组合）；
- 打完字后光标停止闪烁；
- 添加背景音效模拟打字音（需 JS）；
- 与 CSS 动画延迟结合，实现分时打字。