.jpg)
打字機(jī)效果的實(shí)現(xiàn)主要通過(guò)css的animation屬性與steps()函數(shù)。首先，創(chuàng)建html元素承載文字內(nèi)容；其次，在css中設(shè)置overflow: hidden隱藏溢出部分，并通過(guò)@keyframes定義寬度從0到100%的動(dòng)畫；接著，將動(dòng)畫應(yīng)用至文字元素，使用steps()函數(shù)按字符數(shù)分步顯示，結(jié)合white-space: nowrap防止換行；最后可添加光標(biāo)閃爍動(dòng)畫增強(qiáng)真實(shí)感。為提升自然度，可通過(guò)JavaScript加入隨機(jī)延遲、變速動(dòng)畫、模擬錯(cuò)誤、停頓及不同字符時(shí)長(zhǎng)等技巧。打字機(jī)效果適用于歡迎語(yǔ)、教程演示、游戲互動(dòng)等場(chǎng)景，但需注意其對(duì)可訪問(wèn)性、SEO、性能及用戶體驗(yàn)的影響，合理調(diào)整以確保最佳展示效果。
打字機(jī)效果，說(shuō)白了就是讓文字一個(gè)字一個(gè)字地顯示出來(lái)，營(yíng)造一種好像有人在鍵盤上敲擊的感覺。實(shí)現(xiàn)方法其實(shí)挺簡(jiǎn)單的，主要是利用CSS的animation屬性，配合steps()函數(shù)，再加上一些巧妙的設(shè)置。
解決方案：
首先，我們需要一個(gè)html元素來(lái)承載文字。例如：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
<div class="typing-container"> <p class="typing-text">Hello, world! This is a typing effect.</p> </div>
然后，編寫CSS代碼。核心思路是：
- 隱藏溢出部分： 設(shè)置overflow: hidden;，這樣文字就不會(huì)一開始就全部顯示出來(lái)。
- 定義動(dòng)畫： 使用@keyframes定義一個(gè)動(dòng)畫，讓元素的寬度從0逐漸增加到100%。
- 應(yīng)用動(dòng)畫： 將動(dòng)畫應(yīng)用到文字元素上，并使用steps()函數(shù)控制動(dòng)畫的步數(shù)，讓文字一個(gè)字一個(gè)字地顯示。
- 光標(biāo)閃爍（可選）： 可以添加一個(gè)光標(biāo)元素，并使用動(dòng)畫讓它閃爍，增加真實(shí)感。
完整的CSS代碼如下：
.typing-container { width: 100%; overflow: hidden; } .typing-text { width: 0; white-space: nowrap; /* 防止文字換行 */ overflow: hidden; border-right: .15em solid orange; /* 光標(biāo) */ animation: typing 4s steps(40, end) forwards, /* 40是文字長(zhǎng)度 */ blink-caret .75s step-end infinite; } /* 打字動(dòng)畫 */ @keyframes typing { from { width: 0 } to { width: 100% } } /* 光標(biāo)閃爍 */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }
解釋一下：
- steps(40, end)：steps()函數(shù)將動(dòng)畫分成40步，對(duì)應(yīng)文字的長(zhǎng)度（包括空格）。end表示動(dòng)畫在每一步的結(jié)束時(shí)更新。
- forwards：forwards關(guān)鍵字讓動(dòng)畫在結(jié)束后保持最后一幀的狀態(tài)，也就是文字全部顯示出來(lái)。
- blink-caret：光標(biāo)閃爍動(dòng)畫，讓光標(biāo)顏色在透明和橙色之間切換。
這樣，就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的打字機(jī)效果。當(dāng)然，可以根據(jù)需要調(diào)整動(dòng)畫時(shí)長(zhǎng)、文字顏色、光標(biāo)樣式等。
如何讓打字機(jī)效果更自然，避免機(jī)械感？
steps()函數(shù)雖然能實(shí)現(xiàn)逐字顯示，但如果每個(gè)字顯示的時(shí)間完全一樣，就會(huì)顯得很機(jī)械。要讓效果更自然，可以考慮以下幾點(diǎn)：
-
隨機(jī)延遲： 在每個(gè)字顯示之前，添加一個(gè)隨機(jī)的延遲。可以用JavaScript來(lái)實(shí)現(xiàn)，在CSS動(dòng)畫的基礎(chǔ)上，控制每個(gè)字的顯示時(shí)機(jī)。
-
變速動(dòng)畫： 讓動(dòng)畫的速度不是恒定的，而是有所變化。例如，在開始和結(jié)束時(shí)速度慢一些，中間速度快一些。這可以通過(guò)調(diào)整animation-timing-function屬性來(lái)實(shí)現(xiàn)，例如使用ease-in-out。
-
模擬錯(cuò)誤： 真實(shí)的人打字時(shí)，難免會(huì)出錯(cuò)，需要?jiǎng)h除一些字。可以在動(dòng)畫中模擬這種錯(cuò)誤，例如隨機(jī)刪除幾個(gè)字，然后再重新輸入。
-
停頓： 在句子末尾或標(biāo)點(diǎn)符號(hào)處，可以添加一個(gè)短暫的停頓。
-
不同字符時(shí)長(zhǎng)： 根據(jù)字符的復(fù)雜程度，設(shè)置不同的顯示時(shí)長(zhǎng)。例如，字母“W”比字母“I”更寬，可以稍微延長(zhǎng)顯示時(shí)間。
這些方法結(jié)合起來(lái)，可以讓打字機(jī)效果更逼真，更接近真實(shí)人類的打字行為。
打字機(jī)效果在哪些場(chǎng)景下比較適用，又有哪些局限性？
打字機(jī)效果在一些特定的場(chǎng)景下，可以增加頁(yè)面的趣味性和吸引力。例如：
- 歡迎語(yǔ)/介紹語(yǔ)： 在網(wǎng)站首頁(yè)，用打字機(jī)效果顯示歡迎語(yǔ)或介紹語(yǔ)，可以吸引用戶的注意力。
- 教程/演示： 在教程或演示中，用打字機(jī)效果逐步展示代碼或操作步驟，可以幫助用戶更好地理解。
- 游戲/互動(dòng)： 在游戲或互動(dòng)應(yīng)用中，用打字機(jī)效果顯示對(duì)話或提示信息，可以增加沉浸感。
然而，打字機(jī)效果也有一些局限性：
- 可訪問(wèn)性： 對(duì)于屏幕閱讀器用戶來(lái)說(shuō)，打字機(jī)效果可能會(huì)造成困擾，因?yàn)槠聊婚喿x器會(huì)逐字朗讀文字，而不是一次性朗讀整個(gè)句子。因此，在使用打字機(jī)效果時(shí)，需要考慮可訪問(wèn)性，例如提供一個(gè)替代方案，讓屏幕閱讀器用戶可以一次性閱讀完整的內(nèi)容。
- SEO： 搜索引擎爬蟲可能無(wú)法正確解析打字機(jī)效果中的文字，這可能會(huì)影響網(wǎng)站的SEO。因此，在使用打字機(jī)效果時(shí)，需要確保搜索引擎可以抓取到完整的文字內(nèi)容。
- 性能： 復(fù)雜的打字機(jī)效果可能會(huì)消耗一定的計(jì)算資源，特別是在移動(dòng)設(shè)備上。因此，需要注意優(yōu)化動(dòng)畫效果，避免影響頁(yè)面性能。
- 用戶體驗(yàn)： 如果打字機(jī)效果的速度太慢或太快，或者效果過(guò)于花哨，可能會(huì)影響用戶體驗(yàn)。因此，需要根據(jù)實(shí)際情況調(diào)整動(dòng)畫效果，確保用戶可以舒適地閱讀內(nèi)容。
總的來(lái)說(shuō)，打字機(jī)效果是一種有趣且實(shí)用的動(dòng)畫效果，但需要謹(jǐn)慎使用，并充分考慮其局限性。
.png)
