CSS, CSS3, 網頁設計

CSS3動畫hover套件,各種常用的互動特效直接套用

梅干 2016/05/25
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
  CSS3提供了許多實用的屬性,像是動畫特效,讓網頁整個動起來,同時又不會影響到電腦的效能,有別於以往使用Flash所作的動畫,但想使用CSS3的動畫屬性,就得花時間學習CSS3的動畫語法,同時CSS3的動畫語法也相當的繁索,因此得花上些許時間才能上手,因此梅干最近發現一款hover的動態特效套件,即便完全不會CSS3語法也沒關係,只需將此套件引用到自己的專案中,接著再要套用的特效效果的類別名稱,加到DIV或連結標籤中,立即就會產生動態特效,相當的方便好用,因此想讓網頁動起來的朋友,現在也一塊來看看囉!
Hover.css
套件名稱:Hover.css
套件下載:ianlunn.github.io/Hover

Step1
進到套件網站後,在下方可看到有各式各樣常用的滑入動態特效。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step2
接著點上方的藍色Donwload鈕。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step3
進入GitHub後,點一下右上的Download鈕。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step4
下載完畢,解壓縮會看到一堆的資料夾與檔案,而所有的核心檔案就在CSS的資料夾中。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step5
進入css資料夾後,將hover-min.css這隻複雜到自己的專案下。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step6
那要怎麼使用呢?方法很簡單,先用瀏覽器的網頁開發工具,對著要套用特效的按鈕,點一下就會秀出該特效的類別名稱。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step7
接著只需把剛的css引用進來,再把要套用的特效類別名稱,加到要呈現的標籤中。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
Step8
這時當滑鼠滑入時,就會有動態的效果啦!是不是超方便又簡單的,同時完全無需學習任何CSS3的動畫語法。
梅問題-CSS3 hover套件,各種常用的動態特效直接套用
[範例預覽] | [範例下載]