純 CSS 打字效果

網頁上的單行文字，可以用經典的 CSS 技巧讓元素寬度以 steps() 分步增長，字母就像被逐一打出來，右側邊框則充當游標：

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

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

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

steps(11, end) 裡的數字要與字元數一致，3s 決定打字速度。這種方式適合首屏標題，但多行文字、自訂字體和匯出可分享檔案都不太方便。

需要做成檔案？

我們的打字文字 GIF 工具可以把同樣的動畫匯出為循環 GIF，隨處可用。

製作 GIF

前端元件庫

使用 React 或 Vue 時，元件庫通常已經提供打字效果，並支援速度、游標和循環參數。Framer 的動畫工具包含打字變體，MagicUI 提供專門的 TypingAnimation 元件，react-type-animation 和 typed.js 也可以直接安裝使用。

想把元件的效果變成可分享檔案，可以用免費的打字文字 GIF 工具產生並下載 GIF。

影片剪輯軟體

如果需要更精緻的畫面，影片剪輯軟體仍是傳統選擇。在 CapCut 中加入文字層並使用「打字機」動畫後匯出；在 After Effects 中，可以用 Source Text 關鍵影格表達式逐一截取字串，再加一個閃爍游標圖層。它們控制力更強，但每次改字都要重新算圖。

如果只需要乾淨的打字循環，不想處理時間軸，打字文字 GIF 工具幾秒就能產生。

免費線上 GIF 工具（推薦）

聊天、README、社群動態和文件中，循環 GIF 通常最便攜，而且不需要安裝任何軟體：

輸入文字：最多 200 個字元，支援換行。
選擇風格與速度：9 種字體、自訂顏色或透明背景、游標樣式、4 種畫布尺寸和 5 段速度。
下載 GIF：在瀏覽器內產生，免費且無浮水印。

試試打字文字 GIF 工具：全程在瀏覽器執行，支援 iPhone 和 Android，無需註冊。