放一些想要練習的目標清單在這裡

練習目標

練習4 - Hover button

Ref: hover-button-animation3
Author: Lichin

Tool: 錄製網頁GIF的工具

練習5 - Error Message

先前的練習

練習3 - 打字機效果

See the Pen UI practice - Typewriter by 577 (@thisis577) on CodePen.

完全靠 keyframes 寫出來的
缺點是不能輸入太長的字串，不然時間會不夠用~~

其他應用：首頁置頂效果

練習2 - 搜尋效果

Author: 不知道作者是誰QQ，待查

成果：codepen

用 SVG 可以辦到好多事情阿！
但是這一頁在舊版 chrome & 手機上一開就 Crash，一定有哪裡寫錯吧…QQ
（因為會 crash 暫時不放 embed)

練習1 - 切換日夜

Author: 不知道作者是誰，待查

成果：

See the Pen UI example practice - switch day and night by 577 (@thisis577) on CodePen.

知道怎麼用動畫拼出來就沒有再細刻了，細節沒有做到完全一模一樣。
因為是第一個練習，沒有用到 SVG，感覺用了很多不必要的 div，有點笨啊…
CSS3 的貝茲曲線沒有辦法做出 bounce 的效果，太陽跟月亮的那個「ㄉㄨㄞ妖妖」的感覺可能需要用 SVG 的動畫或者 JS 來做吧 @@

Ref: Easing 函數速查表