CSS實現文字打字動畫（+1白話講解）

AddOneG發表於2018-03-14
原文網址 : https://juejin.im/post/5aa8dcc26fb9a028cd44cbb3
CSS動畫

介紹

很多時候，我們會有一些奇怪的騷想法，比如讓網頁中的一些特定文字像敲程式碼一樣一個一個顯示出來，有一種命令列的感覺，增加設計感，很多人覺得這個效果要用很長一段JS來實現.... 正好手頭有個例子，我決定用CSS實驗一下

開始操作

原圖

CSS實現文字打字動畫（+1白話講解）

emmmmmm...請忽略我的字型

  • 想法1: 讓這段文字從寬度0變成實際寬度
.title{
  ...
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}
複製程式碼

CSS實現文字打字動畫（+1白話講解）

emmmm, 忘記禁止折行和剪下超出部分文字了

修改

.title{
  ...
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}
複製程式碼

CSS實現文字打字動畫（+1白話講解）

看起來還不錯，但是還不夠，我們希望字元能一個一個出來，想了想，Animation裡面有個叫steps的東西，各位可以簡單的理解(具體的這裡就不介紹啦)為: 裡面放多大的數字就是分多少幀執行，比如steps(5)就是將動畫分成5幀執行。

就算我們能讓動畫一幀一幀執行，但是怎麼讓字元一個一個出現呢?

答案是.... 無人問津的ch單位，這是CSS3的新單位，表示"0"的寬度，到這我想真正的解決方案就出現啦！

在等寬字型中，"0"字形的寬度和其他所有字形的寬度是一樣的

修改

.title{
  ...
  width: 17ch; //別忘了把空格算上!
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s steps(17);  //steps裡為你的字元數
}
@keyframes typing{
  from {
    width: 0;
  }
}
複製程式碼

CSS實現文字打字動畫（+1白話講解）

或許我們還需要一個閃爍的游標？那就留著下次講好了(如果我沒忘的話)

閃爍動畫文章更新啦 點這裡

文章翻譯改編於CSS揭祕

相關文章