概述
很早以前就在别人的博客上面看到打字动画了，觉得非常炫酷，以为是用js做的，找了半天也没找到js在哪里。今天看《css揭秘》，碰巧看到书上打字动画的实现了，而且是纯css实现的！我参考这本书把代码记录下来，供以后开发时参考，相信对其他人也有用。
代码
书上的css代码是这样的：
@keyframes typing { ???from { width: 0 } /* 从左到右的动画 */}@keyframes caret { ???50% { border-color: transparent; } /* 闪烁动画 */}h1 { ???width: 15ch; /* 文本的宽度 */ ???overflow: hidden; ???white-space: nowrap; ???border-right: .05em solid; ???animation: typing 6s steps(15), ???caret 1s steps(1) infinite;}js实现
有时候，给网页加上css非常不方便，如果写成js插件的形式会方便许多，下面的代码是我把上面的css代码改成插件的形式：
(function() { ?var timing = 15, //设置动画时间，单位为秒 ?????userClass = "#blog_news_aboutme", //设置动画标签的class ?????isEnglish = true; //不支持汉字和英文混合；汉字填false，英文填true ?//添加style标签 ?var rule = "@keyframes typing {from { width: 0; } } @keyframes caret {50% { border-color: transparent; } } " + userClass +" {width: 32em; overflow: hidden; white-space: nowrap; border-right: .05em solid; animation: typing " + timing + "s steps(32) infinite, caret 1s steps(1) infinite; }"; ?var style = document.createElement('style'); ?style.type = 'text/css'; ?style.innerHTML = rule; ?document.getElementsByTagName('head')[0].appendChild(style); ?//原生工具函数 ?function $$(selector, context) { ?context = context || document; ?var elements = context.querySelectorAll(selector); ?return Array.prototype.slice.call(elements); ?} ???//按字数改变动画 ?$$('h1').forEach(function(h1) { ?var len = h1.textContent.length + 1, s = h1.style; ?var unit = isEnglish ? 'ch' : 'em'; ?s.width = (len + 0.08) + unit; ?s.animationTimingFunction = "steps("+ len +"),steps(1)"; ?});})()只要按照注释修改timing，userClass和isEnglish这三个参数，然后把js引入到网页中，就可以实现打字效果啦。
具体效果请参考我的博客左上角的公告栏。（只能用PC端看，手机端看不到喔！）
其它
当然，也有大神用js实现了打字效果并做成了插件，具体可以看这个插件termynal。
纯css实现打字效果
原文地址：https://www.cnblogs.com/yangzhou33/p/8948238.html