33個jQuery與CSS3實現的絢麗滑鼠懸停效果
只要你有創意,完全可以使用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到微博上面去!
轉自:http://www.shejidaren.com/jquery-css3-image-hover-effects.html