今天分享一段優質 CSS 程式碼片段，實現打字機般的效果或其他類似的離散動畫效果。
老規矩，先閱讀程式碼片段並思考，再看程式碼解析再思考，最後評論區留下你的見解！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS打字機效果</title>
<style>
.text {
border-right: 2px solid #eee;
font-size: 28px;
text-align: center;
white-space: nowrap;
overflow: hidden;
background: #fff;
}
.useAnimation {
animation: width-change 4s steps(44) 1s normal both,
color-change 0.5s steps(44) infinite normal;
}
@keyframes width-change {
from {
width: 0;
}
to {
width: 343px;
}
}
/* 豎線的閃爍效果 */
@keyframes color-change {
from {
border-right-color: #363636;
}
to {
border-right-color: #ffffff;
}
}
</style>
</head>
<body>
<p class="text useAnimation">
歡迎投稿分享,優質程式碼片段
</p>
</body>
</html>
分享原因
這段程式碼展示瞭如何使用 CSS 動畫來建立文字打字效果，以及如何使游標閃爍。
這種動畫效果通常用於增強用戶界面的動態互動感。
例如：在部落格文章或新聞網站中，使用這種效果可以突出顯示重要的引用或關鍵資訊，吸引讀者的關注。
程式碼解析
1. 基本樣式設定 .text
border-right: 2px solid #eee;：新增一個右邊框，模擬游標效果。
white-space: nowrap;：防止文字換行。
overflow: hidden;：隱藏超出容器範圍的內容。
2. @keyframes width-change
from { width: 0; }：起始狀態寬度為 0。
to { width: 343px; }：結束狀態寬度為 343px，可根據文字實際寬度自行調整。
3. @keyframes color-change
from { border-right-color: #363636; }：起始狀態右邊框顏色為深灰色。
to { border-right-color: #ffffff; }：結束狀態右邊框顏色為白色。
4. 應用動畫 .useAnimation
animation：應用兩個動畫 width-change 和 color-change。
width-change 4s steps(44) 1s normal both：
動畫 width-change 執行 4 秒。
動畫延遲 1 秒開始。
normal 表示正常播放。
both 表示動畫結束時保持最終狀態。
steps(44) 會使動畫在 4 秒內完成 44 步，每步大約 0.09 秒（4 秒除以 44 步）。這會產生一種逐步增加寬度的效果，類似於打字機一個字元一個字元顯示的效果。
color-change 0.5s steps(44) infinite normal：
動畫 color-change 執行 0.5 秒。
infinite 表示動畫無限迴圈。
steps(44) 建立了一個分為 44 步的閃爍動畫，每步大約 0.011 秒（0.5 秒除以 44 步），這會使游標看起來在不斷閃爍。
