實現css打字機效果的核心在于使用animation屬性配合overflow: hidden和white-space: nowrap，通過關鍵幀定義逐字顯示動畫。具體步驟如下：1. 創建html元素承載文本；2. 設置容器寬度、禁止換行、隱藏溢出內容；3. 使用steps()函數將動畫分割為對應字符數的步進動畫；4. 添加blink-caret動畫模擬光標閃爍。要增強真實感可添加停頓、錯誤回退、隨機性或結合聲音效果；速度控制通過調整animation時間參數，延遲則用animation-delay設置；應用場景包括網站首頁標語、個人簡歷展示、教程演示、游戲對話及加載動畫等，在提升視覺吸引力的同時需注意避免過度使用影響用戶體驗。
實現css打字機效果，核心在于利用animation屬性模擬文本逐字顯示的動畫，配合overflow: hidden和white-space: nowrap屬性，以及關鍵幀@keyframes定義動畫過程。這是一種簡單而有效的視覺呈現方式，可以為網頁增加趣味性和吸引力。
解決方案：
首先，你需要一個html元素來承載文本內容。例如：
立即學習“前端免費學習筆記（深入）”；
<h1 class="typing-effect">Hello, World!</h1>
接下來，編寫CSS樣式。關鍵點在于animation屬性，它控制動畫的播放時間和速度。steps()函數是實現逐字顯示效果的關鍵。
.typing-effect { width: 22ch; /* 文本的字符數 */ white-space: nowrap; overflow: hidden; border-right: .15em solid orange; /* 可選：添加閃爍的光標 */ animation: typing 2s steps(22, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 22ch } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } }
這段代碼的核心是steps(22, end)，它將動畫分割成22步（對應”Hello, World!”的字符數），每一步顯示一個字符。blink-caret動畫則用于創建閃爍的光標效果，增加真實感。width: 22ch 設置了容器的寬度，ch 單位表示“字符寬度”。
如何讓打字機效果更逼真？
除了基本的逐字顯示，還可以通過添加一些細節來增強效果。例如，可以模擬打字時的停頓和錯誤回退。
-
添加停頓： 在@keyframes typing中，可以插入一些delay來模擬打字員的思考時間。例如，在句號或逗號后增加停頓。
-
模擬錯誤回退： 可以通過在動畫中短暫地減少寬度，然后再恢復來實現。這需要更復雜的關鍵幀設置，但可以顯著提升真實感。
-
隨機性： 稍微改變每個字符顯示的時間間隔，可以使動畫看起來更自然。雖然CSS本身不直接支持隨機數，但可以通過JavaScript來動態生成CSS變量，并將其應用到動畫上。
-
聲音效果： 雖然這超出了CSS的范圍，但添加打字的聲音效果可以極大地增強沉浸感。
如何控制打字機效果的速度和延遲？
控制打字機效果的速度主要通過調整animation屬性中的時間參數。例如，animation: typing 2s steps(22, end)中的2s表示整個動畫的持續時間。增加這個值會降低打字速度，反之則加快。
延遲可以通過animation-delay屬性來設置。例如，animation-delay: 1s會在頁面加載后延遲1秒才開始播放動畫。
需要注意的是，steps()函數中的步數應與文本的字符數一致，否則會出現顯示不完整或顯示過多的情況。
打字機效果在實際項目中有哪些應用場景？
打字機效果可以用于各種場景，以吸引用戶的注意力并傳達信息。
-
網站首頁： 在網站首頁的標題或標語中使用打字機效果，可以快速吸引用戶的目光，并突出網站的核心價值。
-
個人簡歷： 在個人簡歷的開頭使用打字機效果，可以展示個人的技術能力和創意。
-
教程或演示： 在教程或演示中，可以使用打字機效果來逐步展示代碼或操作步驟，提高用戶的理解度。
-
游戲或互動應用： 在游戲或互動應用中，可以使用打字機效果來呈現對話或故事情節，增加趣味性。
-
加載動畫： 在頁面加載時，可以使用打字機效果來顯示加載進度，避免用戶感到無聊。
在選擇使用打字機效果時，需要考慮用戶體驗。不要過度使用，以免分散用戶的注意力或影響頁面的性能。同時，要確保動畫的速度和延遲適中，以便用戶能夠輕松閱讀文本內容。
