使用CSS3模擬打字效果（程式碼實例）

本篇文章給大家透過程式碼實例來介紹一下使用CSS3模擬中文/英文打字效果的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

推薦：css影片教學

#一、使用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。

更多程式相關知識，請造訪：

程式設計入門！ ！

以上是使用CSS3模擬打字效果（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！