纯css实现打字效果

概述

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