概述

很早以前就在別人的博客上面看到打字動畫了，覺得非常炫酷，以為是用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實現打字效果