任務路徑 / 從輸入到結果
如何製作 CSS 文字故障效果
- 01
輸入預覽文字
在「預覽文字」中輸入 1–32 個字元——標籤旁的計數器會即時顯示長度。短而寬的詞在圖層開始分裂後最易讀。
- 02
設定三種顏色
「文字顏色」繪製基礎圖層；「青色通道」和「紅色通道」是產生色差邊緣的兩個偏移副本。
- 03
調整故障動效
「圖層偏移」（1–12 px）決定副本漂移的距離，「循環時長」（0.2–3 s）決定循環速度。預覽會即時演示三個圖層的疊加。
- 04
理解三個圖層
基礎元素保持你的文字顏色，青色副本被裁切到行頂，紅色副本被裁切到行底。每個副本運行 steps(2, end) 動畫——硬跳動而不是平滑滑動——這正是故障效果像訊號干擾的原因。
- 05
複製故障效果 CSS
點「複製 CSS」，或點「下載 .css」儲存 toolars-text-glitch.css。副本透過 content: attr(data-text) 讀取內容，所以你的元素需要一個與文字一致的 data-text 屬性；減少動效的媒體查詢會保留一道靜態色差邊緣。
- 06
加入 data-text 屬性
副本層從 attr(data-text) 讀取內容，所以你的元素需要一個與可見文字完全相同的 data-text 屬性。以後文案變化時兩處都要更新——青色和紅色圖層實際繪製的正是這個屬性。屬性與類別在同一個元素上，整個效果保持單標籤。