小編給大家分享一下如何使用CSS3模擬打字效果，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
一、使用CSS3實現(xiàn)打字效果原理
要模擬打字的效果，就需要讓字符一個一個逐步顯示。
這里是通過改變?nèi)萜鞯膶挾龋屓萜鞯膶挾葟?逐步增加，每次增加的寬度為每個字符的寬度，這樣就可以模擬打字的效果。
為了增強真實性，可以加上光標的閃爍效果，這樣就可以比較好的模擬出打字的效果了。
需要實現(xiàn)的點：
怎么使用CSS讓文本容器的寬度逐步增加
怎么讓容器每次增加的寬度等于每個字符的寬度
怎么模擬光標的閃爍效果
對應實現(xiàn)方法：
使用CSS3中的animation實現(xiàn)動畫效果
利用animation中的steps實現(xiàn)逐步播放動畫
利用文本容器的右邊框動畫實現(xiàn)光標閃爍效果
二、實現(xiàn)
1、英文的打字效果
html：
A miss is as good as a mile.
css實現(xiàn)：
重慶分公司
重慶分公司
@keyframes typing {
from { width: 0}
}
@keyframes blink-caret {
50% { border-color: transparent; }
}
h2 {
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是為了讓光標閃爍的正常一點
}這里因為是實現(xiàn)英文的打字效果，所以字體使用的是等寬字體：monospace，配合長度單位 ch （1ch就是當前字體下數(shù)字0的寬度），在等寬字體下，其它字符的寬度也等于1ch。這樣就可以設置文本容器的寬度 = 所有字符個數(shù) * 1ch。
讓文本容器的寬度從0逐步增加到實際寬度利用的是animation的steps。
steps可以讓動畫分成多少步去播放，像這里因為有28個字符，要讓一個一個字符顯示，就把連續(xù)的動畫分成28步來播放。
blink-caret動畫是實現(xiàn)光標的閃爍效果的，改變右邊框的透明度重復播放實現(xiàn)。
2、中文的打字效果
中文的打字效果和英文不同的點就在于在等寬字體monospace下，中文的一個字符等于 2ch，所以文本容器的寬度 = 中文字符個數(shù) * 2ch。
看完了這篇文章，相信你對如何使用CSS3模擬打字效果有了一定的了解，想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
