用CSS动画实现网页打字效果，让文字自己跳出来

做网页设计时，总想让内容多点灵性。比如一段欢迎语，干巴巴地摆在页面上没人看，要是能像老式打字机那样一个字一个字敲出来，反而让人愿意多停留几秒。这种效果其实不用JavaScript，纯CSS就能搞定。

核心思路：控制文本的显示长度

打字效果的本质，是让文字从左到右逐个出现。CSS里没法直接“逐个显示字符”，但我们可以通过裁剪容器，配合动画改变宽度，来模拟这个过程。

关键属性是 overflow: hidden 和 width 的变化。把文字放在一个固定宽度但溢出隐藏的容器里，再用 @keyframes 从0%宽度动画到100%，看起来就像在打字。

代码实现很简单

先写一个基础的HTML结构：

<p class="typewriter">欢迎来到数码工场，一起玩转数字世界</p>

然后加上CSS：

.typewriter {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000;
  font-size: 18px;
  animation: typing 3.5s steps(28, end), blink-caret 0.5s step-end infinite;
}

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

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

这里用了 steps(28, end)，意思是把动画分成28步完成，对应文字的大致字符数，这样每个字符出现得更清晰。如果你的文字更长或更短，记得调整这个数值。

光标闪动是点睛之笔

加上 border-right 模拟光标，再用 blink-caret 动画让它闪烁，整个效果就更真实了。用户一眼就能明白这是“正在输入”的状态，体验自然多了。

这个技巧特别适合用在个人博客首页、作品集开场白，或者后台管理系统的欢迎面板里。不需要引入额外脚本，维护也方便。

注意兼容性和性能

大部分现代浏览器都支持这些CSS特性，但如果你还得照顾IE，那这招可能得绕开。另外，别滥用在大段文字上，动画太长反而让用户烦躁。两三行的标题类文本最合适。

有时候，最简单的技术反而最有效。一个小小的打字动画，能让冷冰冰的页面瞬间有了人味儿。