模拟编辑器，或者输入框中文字啪啦啪啦输入的效果，纯CSS实现，这种效果可以用在在线版简历，或者年终盘点活动上。
实现效果如下GIF截图：
动画效果主要由两部分组成，一部分是文字依次呈现，另外一部分就是光标的不断闪烁。
demo页面还配了打字键盘音效，锦上添花，效果绝佳，点击页面按钮即可听到：
HTML很简单，如下：
.typing{width:15em;white-space:nowrap;border-right:2pxsolidtransparent;animation:typing3.5ssteps(15,end),blink-caret.75sstep-endinfinite;overflow:hidden;}/*打印效果*/@keyframestyping{from{width:0;}to{width:15em;}}/*光标闪啊闪*/@keyframesblink-caret{from,to{box-shadow:1px000transparent;}50%{box-shadow:1px000;}}可以看到其实实现原理很简单，打字效果其实就是改变容器的宽度实现的。
然后其中有一些细节可以提一下：
效果如下GIF截图示意：
.typing{width:18.5em;height:1.25em;border-right:1pxsolidtransparent;animation:typing3.5ssteps(37,end),blink-caret.75sstep-endinfinite;font-family:Consolas,Monaco;word-break:break-all;overflow:hidden;}/*打印效果*/@keyframestyping{from{width:0;}to{width:18.5em;}}/*光标闪啊闪*/@keyframesblink-caret{from,to{border-color:transparent;}50%{border-color:currentColor;}}和上面中文实现区别在于：
应该还有其他更好的CSS实现方法，欢迎补充，欢迎交流。
困了，老婆已经站在身后了，今天不扯淡了，催着睡觉了。
（本篇完）
名称(必须)
邮件地址(不会被公开)(必须)
网站
不知能否实现多行，自动换行
同问
由此是不是可以再做一个ktv歌词过渡效果，期待中(手动滑稽)。
张大大，这样实现多行打字可以吗，还有更好的方式么
簪子上有八个字，便是仅算粗通文墨的少女，也觉得极为动人。言念君子，温其如玉。/*光标闪啊闪*///box-sizing是border-box@keyframesblink-caret{from,to{box-shadow:4px000#fff,5px000transparent;}50%{box-shadow:4px000#fff,5px000;}}.typing1{width:14em;line-height:1.2;white-space:nowrap;animation:typing17ssteps(14,end),blink-caret.5sstep-end14;overflow:hidden;}@keyframestyping1{from{width:0;}to{width:14em;}//与字数相同}.typing2{width:14em;line-height:1.2;white-space:nowrap;animation:typing27s7ssteps(14,end),blink-caret.5sstep-end14;animation-delay:7s;animation-fill-mode:backwards;overflow:hidden;}@keyframestyping2{from{width:0;}to{width:14em;}//与字数相同}.typing3{width:10em;line-height:1.2;white-space:nowrap;animation:typing35s14ssteps(10,end),blink-caret.5sstep-endinfinite;