用CSS动画轻松实现网页打字效果

你有没有在一些个人博客或者作品集网站上，看到过文字像被敲键盘一样逐个出现的效果？就像有人正在实时打字，特别有氛围感。这种效果其实并不复杂，用纯CSS就能实现，不需要一行JavaScript。

基本原理：利用CSS动画控制文本显示

打字效果的核心思路是：先隐藏文字内容，然后通过动画逐步“露出”每个字符。虽然CSS不能真正逐字控制，但我们可以通过控制文本的宽度和溢出属性，模拟出这个过程。

HTML结构很简单

只需要一个容器元素来放你想“打出来”的文字：

<p class="typing-text">欢迎来到知用网，分享实用电脑技巧</p>

CSS样式实现动画

接下来是关键部分。我们使用 overflow: hidden 隐藏超出容器的内容，再配合 width 的动画变化，让文字一点点显示出来。

.typing-text {
  width: 0;
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden;
  border-right: 2px solid #000; /* 模拟光标 */
  animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #000; }
}

这里的 steps(30, end) 是为了让动画分步执行，看起来更像真实打字。数字30大致对应文字的字符数，你可以根据实际长度调整。而 blink-caret 动画则让右侧的竖线像光标一样闪烁。

兼容性与注意事项

这个方法在现代浏览器中表现良好，包括Chrome、Firefox、Safari和Edge。如果你的文本较长或字体较粗，可以适当调整动画时长和光标样式。比如把 border-right 改成 transparent 或主题色，视觉更协调。

有些设计师还会结合 @media 查询，在手机端关闭动画，避免小屏幕加载时体验卡顿。毕竟用户体验才是第一位。

进阶玩法：多行文字也能打字

如果想对多行文字做类似效果，可以给每行单独加动画，或者用JavaScript动态控制。但纯CSS方案更适合短句标题，比如首页欢迎语、侧边栏签名之类的地方，既轻量又炫酷。

下次做个人页面时，不妨试试这个小技巧。不用引入任何库，几行代码就能让页面生动起来。