css3实现打字效果（详细解析，单行光标消失）

最近在优化网站的Google AdSense，关于栏目点“点击了解本站历史”发现这个由iframe载入页面的css3动画看着有点别扭，其实我是想实现打字效果的，奈何当初技术菜只是用@keyframes控制容器的宽度来显示文字，正好最近有时间就把“网站历史”的动态效果改善一下。

css3实现打字效果代码如下：

html:

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://blog.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才可以实现的效果。

2021年10月26日补充：最近看统计数据，发现有很多人搜“css3打字光标消失”一词，这个很好解决，用setTimeout()方法，比如文字打完后光标再闪三次消失，代码如下：

1. $(document).ready(function(){ 
2.     setTimeout("$('p').css('border-right','none')",6500); 
3. }) 

为什么是6500而不是6000呢？因为光标动画中有个50%的效果，6500光标消失的更加自然。

上面是第一种方法，另一种是纯css，具体操作：把p样式里的border-right: solid 1px #fff;删除，把动画对象cursor的时长改为7s，要保证光标每秒闪烁一次，就把100%分割成14等份，最后一帧也就是100%时隐藏光标，但这个方法要写的css很多，不科学，建议还是js。