摘要：
下面的示例代码是我自己编写的。如果有任何错误，请更正。注意：我将在开头附上每个相关示例所需的CSS属性链接，作为参考和学习的补充。我将在每个示例的末尾附上书中提供的在线示例代码链接；我会从书中选择一些css技巧来分享。感兴趣的伙伴可以阅读本书。你不会失望的。CSS应该知道：ch长度单位步骤场景：如果你实现了自动打字效果，你会怎么做？
前言：
所有实例均来自《CSS揭秘》，该书以平时遇到的疑难杂症为引，提供解决方法，只能说秒极了，再一次刷新了我对CSS的认知
该书只提供了关键CSS代码，虽然有在线示例代码链接，但访问速度较慢。下面示例代码是我自己写的，若有错误，欢迎指正
注：我会在最开头附上每个相关示例所需CSS属性链接作为补充，以供查阅和学习
我会在每个示例最后附上书中提供的在线示例代码链接；
我会从书中选择一些css技巧来分享，有兴趣的小伙伴可以去看看这本书，你不会失望的
CSS需知：
ch长度单位 （ch介绍及实际使用场景）
steps（通俗易懂的steps属性讲解）
场景：
如果让你实现自动打字动效（如下图，想象用键盘在电脑上输入文字的场景）你会怎么做呢？
以前要实现该效果可能需要写较多复杂的JS代码，而且代码较为冗杂，也不利于维护
解决方法：
只需要借用CSS3新增长度单位ch + steps属性即可
注：建议先看上面css需知中2篇张大神的博文，能帮助你更好的理解
Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> @keyframes typing { 0% { width: 0; } } @keyframes caret { 50% { border-right-color: transparent; } } h1 { width: 11ch; white-space: nowrap; overflow: hidden; font-weight: bold; font-size: 36px; font-family: Monaco,monospace,Consolas,"微软雅黑"; border-right: 10px solid #ccc; animation: typing 8s steps(11), caret 1s steps(1) infinite; } </style> </head> <body> <h1>hello world</h1> <h1>0000000000000000000</h1> </body> </html>
书中在线实例：http://dabblet.com/gist/b04ab9f41084b0a66960
补：ch兼容性（PC端支持不错，IE9及以上和其它主流浏览器都支持，移动端安卓暂不支持，所以更多可能考虑在PC端使用）
