一、使用CSS3實現打字效果原理
要模擬打字的效果,就需要讓字符一個一個逐步顯示。
這裏是通過改變容器的寬度,讓容器的寬度從0逐步增加,每次增加的寬度爲每個字符的寬度,這樣就可以模擬打字的效果。
爲了增強真實性,可以加上光標的閃爍效果,這樣就可以比較好的模擬出打字的效果了。
需要實現的點:
- 怎麼使用CSS讓文本容器的寬度逐步增加
- 怎麼讓容器每次增加的寬度等於每個字符的寬度
- 怎麼模擬光標的閃爍效果
對應實現方法:
- 使用CSS3中的animation實現動畫效果
- 利用animation中的steps實現逐步播放動畫
- 利用文本容器的右邊框動畫實現光標閃爍效果
二、實現
1、英文的打字效果
html:
<h1>A miss is as good as a mile.</h1>
css實現:
@keyframes typing {
from { width: 0}
}
@keyframes blink-caret {
50% { border-color: transparent; }
}
h1 {
font: 200% monospace;
border-right: .08em solid;
width: 28ch;
white-space: nowrap;
overflow: hidden;
animation: typing 10s steps(28, end),
blink-caret .5s step-end infinite alternate; //這裏的alternate是爲了讓光標閃爍的正常一點
}
這裏因爲是實現英文的打字效果,所以字體使用的是等寬字體:monospace,配合長度單位 ch (1ch就是當前字體下數字0的寬度),在等寬字體下,其它字符的寬度也等於1ch。這樣就可以設置文本容器的寬度 = 所有字符個數 * 1ch。
讓文本容器的寬度從0逐步增加到實際寬度利用的是animation的steps。
steps可以讓動畫分成多少步去播放,像這裏因爲有28個字符,要讓一個一個字符顯示,就把連續的動畫分成28步來播放。
blink-caret動畫是實現光標的閃爍效果的,改變右邊框的透明度重複播放實現。
2、中文的打字效果
中文的打字效果和英文不同的點就在於在等寬字體monospace下,中文的一個字符等於 2ch,所以文本容器的寬度 = 中文字符個數 * 2ch。