今天要學習如何使用 CSS 來模擬打字機的文字輸入效果，讓文字逐字呈現。會利用 border-right 來模擬光標的閃爍效果，並使用 steps() 函數來精確控制每個字母的出現時間

HTML

   <div class="typewriter">
      <p>Hello Welcome!</p>
   </div>

• typewriter：打字機效果文字的容器
• p：顯示的文字內容

CSS

1. 基本樣式

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   background: linear-gradient(90deg, #99CCFF, #FFB2FF);
}

.typewriter p {
   font-family: monospace;
   font-size: 40px;
   white-space: nowrap; 
   overflow: hidden; 
   border-right: 2px solid black; 
   width: 0; /* 初始寬度為0，隨著動畫逐漸擴展 */
   animation: typing 5s steps(30) 1s infinite, blink 500ms step-end infinite;
   color: white;
}

• body：設置了全屏的背景漸變色，並用 flex 居中對齊容器中的內容
• background : 背景顏色為線性漸變
• .typewriter p ：
  • white-space : 防止文字自動換行，確保打字機效果能夠完整顯示
  • overflow : 隱藏文字超出容器範圍的部分，讓動畫顯示時不會有文字外溢
  • border-right : 模擬打字機的光標
  • width : 隨著動畫逐漸擴展
  • animation :
    • typing 5s steps(30) 1s infinite：設定讓文字以逐字顯示的方式呈現，整個過程持續 5 秒，steps(30) 將動畫分成 30 個步驟，每個步驟對應一個字母的出現，使得文字逐字顯示，且在開始前等待 1 秒，並且不斷重複播放
    • blink 500ms step-end infinite : 設定光標閃爍動畫，每 500 毫秒閃爍一次，step-end 確保每次閃爍效果清晰

2. 打字機動畫

@keyframes typing {
   from {
       width: 0;
   }
   to {
       width: 100%;
   }
}

@keyframes blink {
   50% {
       border-color: transparent;
   }
}

• @keyframes typing ：
  • from { width: 0; }：動畫開始時文字寬度為 0
  • to { width: 100%; } : 動畫結束時文字寬度擴展到 100%，顯示完整文字
• @keyframes blink ：
  • 50% { border-color: transparent; }：在動畫進行到 50% 時，光標顏色變為透明，模擬閃爍效果

結果呈現