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