實現【打字機動畫】的兩種辦法

打字機動畫是一個很常見的動畫效果，實現的方式也有很多

最近在項目中剛好遇到了類似的需求，整理了幾個實現動畫的方法，分享一下~

 

方法一、

 

效果最好的打字機動畫

通過 js 的定時器增減文字，單獨用一個標簽來寫光標動畫，這樣即使文字換行也能良好呈現

 

HTML

<div class="typing">
   <span class="typing-text">這是一個傳說中的打字動畫</span>
   <i class="caret"></i>
</div>

 

CSS

.caret::after {
   content: "";
   display: inline-block;
   width: 2px;
   height: 1em;
   margin-bottom: -2px;
   margin-left: -2px;
   background-color: #333;
   animation: blink-caret .5s step-end infinite;
}
@keyframes  blink-caret { 50% {opacity: 0;} }

 

JS

  var box = document.getElementsByClassName('typing-text')[0];
  var str = box.innerText;
  var i = 0;
  box.innerText = '';
  var typing = setInterval(function() {
    box.innerText += str[i++];
    i >= str.length && clearInterval(typing);
  }, 200);

 

方法二、

在網上找的方法，純 CSS3 做的動畫

通過限定寬度配合 overflow:hidden 來實現文字添加的效果，使用 border 做光標

<style type="text/css">
      .typing {
        border-right: .1em solid;
        width: 9em; /*寬度為“字數 + em”*/
        white-space: nowrap;
        overflow: hidden;
        animation: typing 5s steps(9, end), /*步數為字數*/
              blink-caret .5s step-end infinite alternate;
      }
      @keyframes typing { from { width: 0; } }
      @keyframes blink-caret { 50% { border-color: transparent; } }
</style>
        
<div class="typing">這是一個打字機動畫</div>      

這種辦法的優點就是不用寫 js，但有很多的局限性：

比如文字不能自動換行，元素寬度還需要手動設置

當文字是英文的時候，必須使用 Consolas 之類的等寬字體