30个帅气的鼠标悬停效果

3月 26, 2015

评论 (1)

Sponsor

在网页设计中，鼠标悬停效果常用于文字链接、产品图片、按钮等地方，然而随着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

整理自：bashooka

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

闻风送墨香 -

2015 年 05 月 19 日 上午 10:40

cool!

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站