網設必備!五款「CSS3 hover 特效」大集合

梅問題-五款「CSS3 hover 特效」大集合
  自從CSS3新增了許多新屬性後,讓CSS不再只是單純控制區塊的大小、顏色、靠齊.....等,透過CSS3可製作出各種不同的效果,像是圓角框、陰影、漸層....等,甚至還可透過CSS3製作出動畫與3D特效,大幅的減少圖檔的繪製,除此之外像是滑鼠滑入區塊,不再只是單純的換色、換背景,透過CSS3後,還可增加動態與3D特效,而梅干最近也收集了一些CSS3 Hover特效,讓網頁更有變化,不但有原始檔可下載外,還有詳細的說明文件,且完全無需自己寫,下載後立即就可套用於自己的專案中,因此身為網設的朋友,也趕快來下載囉!

#1 Caption Hover Effects
梅問題-五款「CSS3 hover 特效」大集合
[教學文件] [範例預覽] [範例下載]
#2 Direction-Aware Hover Effect
這一個還蠻有趣的,當滑鼠滑入區塊時,半透明的色塊會在區塊中串來串去。
梅問題-五款「CSS3 hover 特效」大集合
[教學文件] [範例預覽] [範例下載]
#3 Original CSS3 Hover Effects
梅問題-五款「CSS3 hover 特效」大集合
[教學文件] [範例預覽] [範例下載]
#4 CSS3 Hover Effects
梅問題-五款「CSS3 hover 特效」大集合
[教學文件] [範例預覽] [範例下載]
#5 3D Thumbnail Hover Effects
這個還蠻特別的,看起來很像折頁的感覺,但只用到CSS3的3D屬性,就可產生此效果。
梅問題-五款「CSS3 hover 特效」大集合
[教學文件] [範例預覽] [範例下載]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

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

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





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    Bibby 說道:

    #1 Caption Hover Effects 這個連結好像失效了@@
    http://tympanus.net/Tutorials/CaptionHoverEffects/

    回應:
    剛看了一下,可正常瀏覽沒問題
  • 第1梅
    ALIVE 說道:

    真的很酷炫的效果,
    但是手機版上的呈現就會很頭痛了
    好想知道有沒有什麼方法可以替代這樣的效果呢
    是長壓之類的嗎?

    回應:
    手機沒有hover事件,只有totuh,所以這類特效在手機是無法呈現的