✍️ 纯 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 实现光标闪烁。

🔧 可配置建议

🧪 实战 Tips

• ch 是基于字体的单位，1ch ≈ 一个 "0" 字符的宽度，使用它来控制字数特别精准；
• 使用 steps() 可以让每一步对应一个字符显示，避免线性动画带来的“卡顿感”；
• 多段文字打字效果可通过多个 .typing-demo 组合使用。

🧱 小结

• ✅ 无需 JS，纯 CSS 实现；
• ✅ 可配置性强，支持文字数量与时间自定义；
• ✅ 可作为博客签名、欢迎页引导动画、404 页面等使用。

📎 拓展玩法（进阶可考虑）

• 多段分步打字（多个元素组合）；
• 打完字后光标停止闪烁；
• 添加背景音效模拟打字音（需 JS）；
• 与 CSS 动画延迟结合，实现分时打字。