CHAPTER 10 · PRACTICE WORKSPACE

狀態、轉場、動畫與 CTA

有目的、可操作且尊重減少動態偏好的互動回饋

04 Solution 3/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01已完成

讓 CTA 的滑入、按下與鍵盤焦點可辨識

修改檔案:style.css

完成後看見:按鈕有平順位移、按壓回饋與焦點框

TASK-02已完成

替處理中徽章加入有限度的動畫

修改檔案:style.css

完成後看見:處理中標籤以淡入淡出提示狀態

TASK-03已完成

尊重減少動態效果偏好

修改檔案:style.css

完成後看見:系統偏好減少動態時取消轉場與動畫

WORKSPACE

本階段實作區

已完成 TASK-03;請操作完整作品,逐項核對三項 Task 的可見結果。

作品正在準備

讓互動回饋有目的

先用 Tab 找到按鈕,再用滑鼠比較滑入、按下與等待狀態。

查看作品成果

沒有動畫時,這段重要說明仍然可讀。

CONTINUE

把完成品帶進本章創作挑戰

三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。

前往本章創作挑戰