概述

很早以前就在别人的博客上面看到打字动画了，觉得非常炫酷，以为是用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。