Hover.css──CSS動畫特效直接套用

在設計網頁時通常會加進一些豐富活潑的動畫特效，不僅能夠增進瀏覽者與網頁的互動性，也加強了設計上的視覺效果。而CSS3提供了不少相關的特效屬性，但是語法相當複雜，因此，我們來介紹一個可以直接套用CSS3特效的套件，讓你輕鬆展示網頁效果。

首先到套件下載網站

ianlunn.github.io/Hover

裡面有許多簡單特效

還有icon的特效

點Clone or Download 下載

解壓縮檔案，點進CSS的資料夾

找到hover.css或是hover-min.css，將這支css放到自己的專案裡。並家連結在檔案裡。

那麼重點來了，該如何套用這支css裡的特效呢？

首先到下載網站(ianlunn.github.io/Hover)裡，開啟瀏覽器的使用者開發工具(例：chrome瀏覽器－在頁面上按右鍵-->檢查），找到自己想套用的特效，看class的名稱。

例如想要套用shrink的特效，便打開工具檢查發現此特效的class名稱為''hvr-shrink''，便複製這行到自己的檔案裡欲套用的項目，就可以直接使用了唷！