html怎么做文字打字效果,css打字效果

动态打字效果的本质就是p标签的宽度从0增加到文本的宽度时，其文本会逐个展示出来。那么如何控制每一次增加的正好是一个字符的宽度呢？

这就要说到两个关键的东西：font-family:monospace和ch长度单位。

monospace之前已经讲过了，而ch这个单位相信很多前端同行都没有听说过，按照标准，1ch就是当前字体环境中数字 0 的宽度，那么在字体为monospace的情况下，1ch就是所有字符的宽度。

理解了这两个东西，我们就可以在css中设置p标签的字体为monospace，同时宽度设置width:11ch，因为loading....一共有10个字符，但是关键帧应当有(0，1，2，3，4，5，……，10)一共11个，所以添加一个字符的宽度。

除了这两个关键属性外，就是样式的设置了。overflow:hidden;和word-break:keep-all;是为了防止中文字符在p标签宽度不够的情况下出现自动换行的bug。

animation:text 5s infinite steps(11);是利用了steps()值设定步长，因为一共11ch的长度，所以设定11个步长。然后设置infinite来实现无限循环。

注意：汉字的长度是2个字符长度，设定的步长和宽度要x2。