推荐30个酷炫的鼠标悬停效果

在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方，然而随着CSS3的强大，鼠标Hover效果可以变得有更多玩法，实现很多以前用FLASH或Javascript才能实现的效果，而且比起前两者，用CSS代码则更容易实现！

今天我们整理30个帅气的鼠标悬停效果，每个动画都很有新意，喜欢的可以从中体验一下，而且还可以尝试用在你的新设计项目上。

3D hover plane effect By Rian Ariona

根据鼠标位置来变换效果，很好玩，当然需要一些JS来实现。

查看演示

Hover effects with CSS3 By Jacob Stone

如果你做产品列表，可以从这里获得一样产品图片的CSS3 HOVER效果，样式实现太多了，随便一种都很漂亮哦！

查看演示

iHover by gudh

查看演示

Image hover effect By Hervé

这个CSS HOVER效果很弦，花式很多，喜欢的一个一个试试。

查看演示

Social buttons with hover By Marius Balaj

查看演示

Pure CSS SVG Hover Interaction. By Chris

查看演示

Direction-aware 3D hover effect (Concept) By Noel Delgado

查看演示

A collection of CSS text-shadow and pattern effects By Ashley Nolan

查看演示

Ideas for Subtle Hover Effects by Mary Lou

查看演示

3 Cool CSS3 Image Hover Effects by Samuel Norton

查看演示

Simple hover effects with CSS(webkit) filters by thecodeplayer

查看演示

Image Overlay Hover Effects With CSS3 Transitions by callmenick

查看演示

Image Overlay Hover Effect By Arnaud Balland

查看演示

3D Rotation shadows on a :hover event By Rafael González

查看演示

Stylish Social Buttons By Chris Deacy

查看演示

Button Hover Fill By Keenan Staffieri

查看演示

Morphing bullets to icons By Tiffany Rayside

查看演示

Animated Gradient Buttons By JamieKDonnelly

查看演示

Perspective Shadow By Graham Pyne

查看演示

Collection of Button Hover Effects By David Conner

查看演示

3d Hover Design Interaction By Bhakti Al Akbar Pasaribu

查看演示

Easy way to change Text By Jintos

查看演示

Hover Intent – Like button By Sam Lillicrap

查看演示

Reminders Icon Hover Effect By Matteo Bertoldo

查看演示

Hover Animation from UNIQLO By Chris Coyier

查看演示

3D Skew Menu on Hover By Martin Whitaker

查看演示

CSS3 Hover Effects By honglio

查看演示

“Stupid” Case Study Hover By Eric Grucza

查看演示

Profile CSS Hover By Eric Rogg

查看演示

Transitional Buttons By Vitaliy

查看演示

Hover Accordion Full Screen ( Triple ) By Clifford Ryan Nelson

查看演示