今天來點輕鬆的。
前陣子看了某個面試者的履歷網站,封面有個打字的動畫效果,雖然以前也很常看到,但沒有實際用 CSS 來實作過,只有在 CSS SECRETS 上看過做法,趁著心血來潮就來玩玩吧!
主要概念
要有打字效果的動畫,主要就是必須讓文字一個一個出現,因此我們可以利用 overflow
與調整包含文字的元素寬度,來達到這個效果。
|
|
|
|
這邊的文字寬度,要去算你包含文字的那個元素所設定的 font-size
,並乘上你的字數。
出來的結果如下:
搞啥啊!這什麼鬼 XD
兩個問題:
- 寬度會影響行數,就算
overflow: hidden
,文字會折行這件事情並不會消失。 - 文字並沒有真正的逐格出現
Solution
第一個問題好解決,我們可以加上 white-space: nowrap
。
第二個問題就必須借助 CSS 中 animation 的一個屬性值:steps()
通常我們在用 CSS 的 animatin 時,多數會使用 linear, ease-in-out, cubic-bezier 等等的 Speed Curve,這些依照貝茲曲線為主的函式會在關鍵影格中間插入過渡動畫,在一般的使用場景中非常適用,畢竟沒人想要讓動畫看起來卡卡的。
但是在打字動畫中,我們就是需要讓動畫看起來卡卡的 XD
所以我們可以利用這個較少人討論的 steps()
函式來實作。
steps()
會根據你輸入的步驟數,用影格切割動畫,不補入過渡動畫。
我們調整剛剛的 CSS 如下:
|
|
Enhancement
但既然是打字,沒有游標怎麼可以。來加強一下。
閃爍游標的做法很多種,這邊我們採取最簡單的方式,由於我們是利用調整元素寬度去控制文字出現,因此可以直接加入一個右邊框,並調整其 transparent。
|
|
短短五分鐘,純 CSS 的打字效果動畫就出來囉!
Live 範例: