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

介紹

不少時候，咱們會有一些奇怪的騷想法，好比讓網頁中的一些特定文本像敲代碼同樣一個一個顯示出來，有一種命令行的感受，增長設計感，不少人以爲這個效果要用很長一段JS來實現.... 正好手頭有個例子，我決定用CSS實驗一下

開始操做

原圖

emmmmmm...請忽略個人字體

• 想法1: 讓這段文字從寬度0變成實際寬度

.title{
  ...
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}
複製代碼

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

修改

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

看起來還不錯，可是還不夠，咱們但願字符能一個一個出來，想了想，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揭祕