css3实现打字效果（详细解析）

1. <p>Welcome to Wei Yiqi's personal blog.</p> 

css:

1. @keyframes cursor { 
2.  50% { 
3.  border-color: transparent; 
4. } 
5. } 
6. @keyframes text { 
7. from { 
8. width: 0; 
9. } 
10. } 
11. p { 
12.     width: 35ch; 
13.     border-right: solid 1px #000; 
14.     white-space: nowrap; 
15.     overflow: hidden; 
16.     font: 16px monospace; 
17.     animation: cursor 1s infinite step-end, text 4s steps(35); 
18. } 

点此测试代码

要实现此效果需要掌握几个知识点：

1.monospace

这个不常用，monospace是方形字体，也就是肉眼看到的五个m和五个i的宽度是一样的，等宽字体是让字符逐步展示的条件之一。

2.ch

这个也不常用，1ch也就是一个字符的宽度，一个英文字母是一个字符，所以上面代码中“Welcome to Wei Yiqi's personal blog.”加标点符号总共是35个字符，这个是让字符逐步展示的条件之二。

3.step，这个还是不常用。

step-end表示戛然而止，在上面的代码中它取消了光标由透明到不透明之间的过度，我把step-end取消大家来看效果：https://www.weiyiqi.net/lookdoc/typing/typing.html，你会发现光标在出现和消失之间有一个过度，step-end就是取消这个过度让光标闪烁看起来更真实。

steps()指逐步运动，也就是间断执行的动画，言外之意不一定连续的才叫动画。

关于steps功能符的深入介绍大家可以看张鑫旭的文章：https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/

就是这三个不常用的css属性实现了很多人需要用js才能实现的打字效果。

理解了这些知识点实现原理就显而易见了：用容器的右边框透明度变化来实现光标效果，让字符逐步展示来实现打字效果。我再在上面的代码后面加上注释，我想没人看不明白了：

1. @keyframes cursor { 
2.  50% { 
3.  border-color: transparent;/*运动到50%时让边框变透明，0%和100%则不变*/ 
4. } 
5. } 
6. @keyframes text { 
7. from { 
8. width: 0;/*容器宽度（由字符展现撑开）从零开始*/ 
9. } 
10. } 
11. p { 
12.     width: 36ch;/*字符数决定容器的宽度*/ 
13.     border-right: solid 1px #000;/*光标样式*/ 
14.     white-space: nowrap;/*禁止分行*/ 
15.     overflow: hidden;/*禁止分行后文字会超出容器，用overflow: hidden;来隐藏*/ 
16.     font: 16px monospace;/*字体大小和等宽字体*/ 
17.     animation: cursor 1s infinite step-end, text 4s steps(36);/*光标每一秒闪一次且无限循环，容器（字符）在4秒内分36步展现完*/ 
18. } 

需要注意的是一个汉字是两个字符，也就是容器宽度是步数的两倍。

最近在看张鑫旭的《css世界》，买回来就忍俊不禁看了三个小时，其实我们掌握的css都是表层的，而张鑫旭的css很多可以实现js才可以实现的效果。