30个帅气的鼠标悬停效果
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
更多CSS文章，请浏览：
在图形界面上制作CSS3动画：cssanimate
CSS3动画属性实用技巧教程
20款CSS按钮鼠标HOVER效果展示
整理自：bashooka
赞助商链接
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
+ 添加评论One Response to “30个帅气的鼠标悬停效果”
{ 发表评论 }
推荐书籍
-
艺术的故事艺术与审美入门之书 -
DON'T MAKE ME THINK设计师必看 -
《移动应用UI设计模式》手机APP设计 -
《设计心理学 全四册》高阶技能！ -
JavaScript权威指南(第5版)只能说牛X -
《见微知著》Web用户体验入门书籍
Archives
- 2023 年 4 月
- 2022 年 10 月
- 2022 年 9 月
- 2021 年 7 月
- 2021 年 6 月
- 2020 年 6 月
- 2020 年 5 月
- 2020 年 4 月
- 2020 年 3 月
- 2020 年 2 月
- 2020 年 1 月
- 2019 年 12 月
- 2019 年 11 月
- 2019 年 10 月
- 2019 年 9 月
- 2019 年 8 月
- 2019 年 7 月
- 2019 年 6 月
- 2019 年 5 月
- 2019 年 4 月
- 2019 年 3 月
- 2019 年 2 月
- 2019 年 1 月
- 2018 年 12 月
- 2018 年 11 月
- 2018 年 10 月
- 2018 年 9 月
- 2018 年 8 月
- 2018 年 7 月
- 2018 年 6 月
- 2018 年 5 月
- 2018 年 4 月
- 2018 年 3 月
- 2018 年 2 月
- 2018 年 1 月
- 2017 年 12 月
- 2017 年 11 月
- 2017 年 10 月
- 2017 年 9 月
- 2017 年 8 月
- 2017 年 7 月
- 2017 年 6 月
- 2017 年 5 月
- 2017 年 4 月
- 2017 年 3 月
- 2017 年 2 月
- 2017 年 1 月
- 2016 年 12 月
- 2016 年 11 月
- 2016 年 10 月
- 2016 年 9 月
- 2016 年 8 月
- 2016 年 7 月
- 2016 年 6 月
- 2016 年 5 月
- 2016 年 4 月
- 2016 年 3 月
- 2016 年 2 月
- 2016 年 1 月
- 2015 年 12 月
- 2015 年 11 月
- 2015 年 10 月
- 2015 年 9 月
- 2015 年 8 月
- 2015 年 7 月
- 2015 年 6 月
- 2015 年 5 月
- 2015 年 4 月
- 2015 年 3 月
- 2015 年 2 月
- 2015 年 1 月
- 2014 年 12 月
- 2014 年 11 月
- 2014 年 10 月
- 2014 年 9 月
- 2014 年 8 月
- 2014 年 7 月
- 2014 年 6 月
- 2014 年 5 月
- 2014 年 4 月
- 2014 年 3 月
- 2014 年 2 月
- 2014 年 1 月
- 2013 年 12 月
- 2013 年 11 月
- 2013 年 10 月
- 2013 年 9 月
- 2013 年 8 月
- 2013 年 7 月
- 2013 年 6 月
- 2013 年 5 月
- 2013 年 4 月
- 2013 年 3 月
- 2013 年 2 月
- 2013 年 1 月
- 2012 年 12 月
- 2012 年 11 月
- 2012 年 10 月
- 2012 年 9 月
- 2012 年 8 月
- 2012 年 7 月
- 2012 年 6 月
- 2012 年 5 月
- 2012 年 4 月
- 2012 年 3 月
- 2012 年 2 月
- 2012 年 1 月
- 2011 年 12 月
- 2011 年 11 月
- 2011 年 10 月
- 2011 年 9 月
- 2011 年 8 月
- 2011 年 7 月
- 2011 年 6 月
- 2011 年 5 月
- 2011 年 4 月
- 2011 年 3 月
- 2011 年 2 月
- 2011 年 1 月
- 2010 年 12 月
- 2010 年 11 月
赞助商
cool!