大家好，有些时候我们希望在网页中有一段文本的文字逐个出现，模拟一种打字的效果，一般人们通常会使用相对冗长javascript来实现，今天我要跟大家分享的是通过纯CSS的方法创建这种效果，希望能够帮到像我一样的初学者小白。
首先我们来看下效果图，做的有点粗糙还望见谅。
原理介绍：主要思路就是把文本容器的宽度作为动画的主体，把文本放入容器中，然后让容器的宽度从0开始以一个字符的宽度一个字一个字的扩张到它应有的宽度。
局限：主要适用于单行文本，如果是多行文本的话需要逐行设置动画和每行动画的延迟时间，太过麻烦。
好了，下面我们开始来创建它吧！
这里我们以一个1级中文标题为例进行介绍，选择中文是因为我们的方块字每一个字都是等宽的，天然适用。
<h1>逐帧动画加上闪烁效果便可以模拟出一种打字的效果</h1>
然后我们为它添加一个动画，让它的宽度从0变化到完整的宽度，例如上面标题中的文字是23个，那么标题的完整宽度便可设为23em，再根据文字的多少设置一个合适的动画持续时间。
@keyframes typing {
from { width: 0 }
}
h1 {
width: 23em;
animation: typing 13s;
}运行上面的代码你会发现下图中的问题：本应该隐藏的文字不但没有隐藏反而被折成了多行文本。
为了解决这个问题我们可以用"white-space: nowrap；"来阻止文本折行，并用“overflow: hidden;”来隐藏超出宽度的文本。
到了这里运行代码又会发现，整个动画是平稳连贯的，而不是逐字显现的效果，因此我们可以用step()来修复这个问题，让动画分23步完成，至此h1的样式变成下面这样：
h1 {
width: 23em;
overflow: hidden;
white-space: nowrap;
animation: typing 13s steps(23);现在问题到了最后一步，也是画龙点睛的一步，为了让动画更逼真，我们还需要给它加上一个闪烁的光标，如同效果图显示的那样，我们这里可以用h1的右边框来实现，最中的代码如下：
@keyframes typing {
from { width: 0; }
}
@keyframes caret {
50% {border-color: transparent;}
}
h1 {
width: 23em;
overflow: hidden;
white-space: nowrap;
border-right: 0.2em solid;
animation:
typing 13s steps(23),
caret 0.5s steps(1) infinite;现在运行代码看看效果吧