33款CSS3實現的絢麗鼠標懸停效果分享
文章來源于 設計達人，感謝作者 情非得已 給我們帶來經精彩的文章！設計教程/前端設計/前端設計2014-10-16
只要你有創意，完全可以使用CSS3來實現漂亮的動效，當然如果配合jQuery，這樣會更加強大，實現更多高級絢麗的動畫效果。鼠標hover效果是很常用的，雖然很細微的東西，但網站的細節注定的網站的體驗，所以也不要忽視這些小細節。
只要你有創意，完全可以使用CSS3來實現漂亮的動效，當然如果配合jQuery，這樣會更加強大，實現更多高級絢麗的動畫效果。鼠標hover效果是很常用的，雖然很細微的東西，但網站的細節注定的網站的體驗，所以也不要忽視這些小細節。
今天設計達人網整理了33個使用jQuery與CSS3實現絢麗的鼠標懸停效果，有些是純CSS3的，這些效果你完全可以用在你的網頁上，讓網站獲得更好的體驗。
Animated Opening Type （教程）
漂亮的文字翻開效果，很有意思。
Direction-Aware Hover Effect With Css3 And Jquery （教程）
鼠標跟隨懸停效果教程，話說以前看到這個很流行呢。
Css3 Hover Effects With Websymbols Tutorial （教程）
Magnifying Glass For Image Zoom Using Jquery And CSS3
通過Jquery 和 CSS3.實現放大鏡效果。
Social Media Icons With CSS3 Hover Effects
通過CSS3實現3D旋轉的社會化媒體圖標。
Image Highlighting And Preview With Jquery （教程）
圖像放大效果，適合文章用。
CSS3 HOver Effects style Restaurant Menus （教程）
使用CSS3實現的hover效果，鼠標結過列表圖像時會顯示簡介。
Original Hover Effects with CSS3 （教程）
超過10種鼠標懸停圖像動畫效果，酷、弦！
Simple Icon Hover Effects （教程）
簡單的鼠標懸停效果
Shape Hover Effect With Svg （教程）
配合SVG實現的懸停動效。
3D Hover Effect for Thumbnails and Images
一個3D感的hover特效，連陰影也實現了。
Simple yet Amazing CSS3 Aorder Transition Effects
CSS3 邊框過度效果。
Make a Simple Navigation With Hover Transitions
簡單的導航菜單。
Examples of Pseudo-Elements Animtions And Transitions（教程）
看似很復雜的動效，但效果很弦。
Jquery Mouseover Effect Using Parallax Style Tutorial （教程）
這個教程可以實現帶視差感的特效。
Css3 Hover Effect Tutorial With Image Circle （教程）
圓形鼠標hover特效。
Make a Swinging Hover Effect With CSS3 Animations （教程）
CSS3實現按鈕旋轉教程。
AnythingZoomer jQuery Plugin
Annotation Overlay Efect With Css3（教程）
好看的提示、注釋效果！如果用于介紹、注釋的話，這個效果很實用哦。
CSS Powered Buttons with Hover Tooltips
CSS實現Tooltips提示效果。
Useful and Practical jQuery Image ToolTips（教程）
用jQuery實現鼠標hover跟隨圖像。
Adipoli jQuery Image Hover Plugin （教程）
漂亮的圖像懸停過度效果，多種風格。
Paper Like Unfolding Effect（教程）
像打開賀卡、書本一樣的效果。
Caption Hover Effects（教程）
比較實用的鼠標懸停效果，多種樣式。
Flat Folio
Creative Button Styles
Text Revel on Hover: Corner Triangle Slide Overlay
鼠標經過圖像時，右下角的三角形會自動填滿圖像，并展示簡介。
Animated Skills Diagram With Raphael（教程）
圖表特效
Realistic Hover Effect
按鈕hover效果，還帶有陰影哦！
Creating a Border Animation Effect with SVG and CSS（教程）
動畫邊框，很不錯！
Slim
如果你的Logo類似這樣子，可以把這個動畫效果加上去。
CSS Button
Tiles with Animated
磁貼hover效果。
最后
看了這么多鼠標懸停（hover）效果，總一種適合你吧，我已經看中一款并準備應用到下個項目了，先mark到微博上面去。
情非得已
推薦文章
-
21個Sketch實用高頻小技巧2019-02-15
-
25款值得收藏的優秀網站模板免費下載2015-09-16
-
20套高質量的免費網頁模版PSD素材2013-09-02
-
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
-
CSS實例教程：十步學會用CSS建站2011-10-05
-
網頁設計師：淺淡網頁BANNER設計2010-09-27
-
網頁細節教程：WEB設計精確點滴2010-09-13
-
網頁設計中的點滴細節把握2010-09-01
-
總結交互組件創新的四種方式2010-06-28
-
最全的國外電子商務CSS模板下載2010-06-18
熱門文章
-
10種網頁設計中字體的運用方式
相關文章3472018-05-10
-
詳細解析網頁表單設計總結技巧分享
相關文章2212017-09-04
-
10點網頁設計中文字排版的技巧分享
相關文章4362017-08-21
-
快速打造電商專題之黑色星期五案例分享
相關文章2582016-12-12
-
值得設計師看看的5個開發小知識分享
相關文章2682016-12-12
-
實例解析游戲類網頁設計師的成長故事
相關文章3872016-11-23
-
淺談2017年UI設計的10大趨勢分享
相關文章5662016-11-23
-
5種永不過時的網頁版式設計分享
相關文章4712016-11-23
