網頁設計師必學的五個 CSS 動畫庫

俗話說,工欲善其事必先利其器,對現在的網頁設計師來說,為畫面增加一些微互動的動態效果已經是時勢所趨,但 CSS 不比 Flash,需要透過 Code 的方式才寫出動態的效果,對很多視覺設計師來說是一道門檻,所幸網路上已經有很多資源將類似的動畫需求整合起來,只需要用點心去尋找,就可以找到許多功能強大的 CSS 動畫庫,下面我們挑五個比較有名且實用的來介紹。

Animate.css

老字號的動畫庫,只需要引用 Animate.css 就能使用超過九十種以上的動畫效果,可以是純粹的 CSS 動畫,也可以搭配 Javascript/jQuery。如果你想偷懶,五個動畫庫只想學其中一個,那就挑這個吧。(來看看我們的教學)

網頁設計師必學的五個 CSS 動畫庫

Hover.css

針對滑鼠 Hover 的 CSS 動畫庫。

網頁設計師必學的五個 CSS 動畫庫

Hint.css

使用 CSS 模擬 ALT 提示的效果。

網頁設計師必學的五個 CSS 動畫庫

Nifty Modal Window Effects

使用 CSS3 的 transitions 和 animation 模擬多種動態彈跳視窗的效果。

網頁設計師必學的五個 CSS 動畫庫

Loaders.css

多種用 CSS 寫的 Loading 動態。

網頁設計師必學的五個 CSS 動畫庫

場外加碼:

Easing 函數速查表

Easing 的曲線函數可以讓 CSS 動畫跑得更自然,這個網站收錄了各種 Easing 的效果,方便你根據自己的需要查詢使用。

網頁設計師必學的五個 CSS 動畫庫

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料