本篇文章給大家透過程式碼實例來介紹一下使用CSS3模擬中文/英文打字效果的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
推薦:css影片教學
#一、使用CSS3實作打字效果原理
要模擬打字的效果,就需要讓字元一個逐步顯示。
這裡是透過改變容器的寬度,讓容器的寬度從0逐步增加,每次增加的寬度為每個字元的寬度,這樣就可以模擬打字的效果。
為了增強真實性,可以加上遊標的閃爍效果,這樣就可以比較好的模擬出打字的效果了。
需要實作的點:
怎麼使用CSS讓文字容器的寬度逐步增加
怎麼讓容器每次增加的寬度等於每個字元的寬度
怎麼模擬遊標的閃爍效果
##對應實現方法:
#二、實作
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是为了让光标闪烁的正常一点 }
1ch就是目前字體下數字0的寬度),在等寬字體下,其它字元的寬度也等於1ch。這樣就可以設定文字容器的寬度 = 所有字元數 * 1ch。
讓文字容器的寬度從0逐步增加到實際寬度利用的是animation的steps。 steps可以讓動畫分成多少步驟去播放,像這裡因為有28個字符,要讓一個一個字符顯示,就把連續的動畫分成28步來播放。 blink-caret動畫是實現遊標的閃爍效果的,改變右邊框的透明度重複播放實作。2、中文的打字效果
#中文的打字效果和英文不同的點就在於在等寬字型monospace下,中文的一個字等於2ch,所以文字容器的寬度= 中文字個數* 2ch。 更多程式相關知識,請造訪:
程式設計入門! !
以上是使用CSS3模擬打字效果(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!