css3 数字字体-CSS3手动打字动画，让你的文字动起来！

今天教大家如何做一个手动打字效果，可以让网页效果有动画效果。 利用这个原理，可以制作一个网页动画版的自我介绍，非常好

发展主要思路

控制长度

HTML部分

首先我们在body里随便写点东西

疗效

首先，我们将第一步制作成动画。

经过以上款式后，没有任何疗效。 因为文本还没有被处理，所以通过严格禁止换行空白并隐藏溢出，至少可以得到流畅的文本显示动画。

打字效果

流畅的动画无法展现打字的效果，也没有一一出现的效果。 此时可以考虑长度单位ch。 ch 是数字“0”的间距。 我们可以使用 ch 来表示所有单词间距css3 数字字体，只要我们保持所有字母间距相等即可。

字母一般都是不等宽的。如下

IIIIIIIII

嗯嗯嗯

对于等宽，我们可以设置font-family属性来查找等宽文本。以下三个都可以

这时候就可以使用steps功能了，具体可以自己查看。一一实现文字的外观

光标疗效

光标相当于另一个动画css3 数字字体，闪烁闪烁，是颜色切换动画

最终代码

注意坑：

宽度：11通道； ch 是等宽的，只要定义尽可能多的字符即可。 我又定义了一个长度，因为我是连续动画，所以如果动画不连续就不用加1了。