只要你有創(chuàng)意，完全可以使用CSS3來(lái)實(shí)現(xiàn)漂亮的動(dòng)效，當(dāng)然如果配合jQuery，這樣會(huì)更加強(qiáng)大，實(shí)現(xiàn)更多高級(jí)絢麗的動(dòng)畫(huà)效果。鼠標(biāo)hover效果是很常用的，雖然很細(xì)微的東西，但網(wǎng)站的細(xì)節(jié)注定的網(wǎng)站的體驗(yàn)，所以也不要忽視這些小細(xì)節(jié)。

今天設(shè)計(jì)達(dá)人網(wǎng)整理了33個(gè)使用jQuery與CSS3實(shí)現(xiàn)絢麗的鼠標(biāo)懸停效果，有些是純CSS3的，這些效果你完全可以用在你的網(wǎng)頁(yè)上，讓網(wǎng)站獲得更好的體驗(yàn)。

Animated Opening Type （教程）

漂亮的文字翻開(kāi)效果，很有意思。

查看演示

Direction-Aware Hover Effect With Css3 And Jquery （教程）

鼠標(biāo)跟隨懸停效果教程，話說(shuō)以前看到這個(gè)很流行呢。

查看演示

Css3 Hover Effects With Websymbols Tutorial （教程）

查看演示

Magnifying Glass For Image Zoom Using Jquery And CSS3

通過(guò)Jquery 和 CSS3.實(shí)現(xiàn)放大鏡效果。

查看演示

Social Media Icons With CSS3 Hover Effects

通過(guò)CSS3實(shí)現(xiàn)3D旋轉(zhuǎn)的社會(huì)化媒體圖標(biāo)。

查看演示

Image Highlighting And Preview With Jquery （教程）

圖像放大效果，適合文章用。

查看演示

CSS3 HOver Effects style Restaurant Menus （教程）

使用CSS3實(shí)現(xiàn)的hover效果，鼠標(biāo)結(jié)過(guò)列表圖像時(shí)會(huì)顯示簡(jiǎn)介。

查看演示

Original Hover Effects with CSS3 （教程）

超過(guò)10種鼠標(biāo)懸停圖像動(dòng)畫(huà)效果，酷、弦！

查看演示

Simple Icon Hover Effects （教程）

簡(jiǎn)單的鼠標(biāo)懸停效果

查看演示

Shape Hover Effect With Svg （教程）

配合SVG實(shí)現(xiàn)的懸停動(dòng)效。

查看演示

3D Hover Effect for Thumbnails and Images

一個(gè)3D感的hover特效，連陰影也實(shí)現(xiàn)了。

查看演示

Simple yet Amazing CSS3 Aorder Transition Effects

CSS3 邊框過(guò)度效果。

查看演示

Make a Simple Navigation With Hover Transitions

簡(jiǎn)單的導(dǎo)航菜單。

查看演示

Examples of Pseudo-Elements Animtions And Transitions（教程）

看似很復(fù)雜的動(dòng)效，但效果很弦。

查看演示

Jquery Mouseover Effect Using Parallax Style Tutorial （教程）

這個(gè)教程可以實(shí)現(xiàn)帶視差感的特效。

查看演示

Css3 Hover Effect Tutorial With Image Circle （教程）

圓形鼠標(biāo)hover特效。

查看演示

Make a Swinging Hover Effect With CSS3 Animations （教程）

CSS3實(shí)現(xiàn)按鈕旋轉(zhuǎn)教程。

查看演示

AnythingZoomer jQuery Plugin

查看演示

Annotation Overlay Efect With Css3（教程）

好看的提示、注釋效果！如果用于介紹、注釋的話，這個(gè)效果很實(shí)用哦。

查看演示

CSS Powered Buttons with Hover Tooltips

CSS實(shí)現(xiàn)Tooltips提示效果。

查看演示

Useful and Practical jQuery Image ToolTips（教程）

用jQuery實(shí)現(xiàn)鼠標(biāo)hover跟隨圖像。

查看演示

Adipoli jQuery Image Hover Plugin （教程）

漂亮的圖像懸停過(guò)度效果，多種風(fēng)格。

查看演示

Paper Like Unfolding Effect（教程）

像打開(kāi)賀卡、書(shū)本一樣的效果。

查看演示

Caption Hover Effects（教程）

比較實(shí)用的鼠標(biāo)懸停效果，多種樣式。

查看演示

Flat Folio

查看演示

Creative Button Styles

查看演示

Text Revel on Hover: Corner Triangle Slide Overlay

鼠標(biāo)經(jīng)過(guò)圖像時(shí)，右下角的三角形會(huì)自動(dòng)填滿圖像，并展示簡(jiǎn)介。

查看演示

Animated Skills Diagram With Raphael（教程）

圖表特效

查看演示

Realistic Hover Effect

按鈕hover效果，還帶有陰影哦！

查看演示

Creating a Border Animation Effect with SVG and CSS（教程）

動(dòng)畫(huà)邊框，很不錯(cuò)！

查看演示

Slim

如果你的Logo類似這樣子，可以把這個(gè)動(dòng)畫(huà)效果加上去。

查看演示

CSS Button

查看演示

Tiles with Animated

磁貼hover效果。

查看演示

最后

看了這么多鼠標(biāo)懸停（hover）效果，總一種適合你吧，我已經(jīng)看中一款并準(zhǔn)備應(yīng)用到下個(gè)項(xiàng)目了，先mark到微博上面去。