HTML & CSS » 30个帅气的鼠标悬停效果

30个帅气的鼠标悬停效果

发表于: HTML & CSS. 评论 (1)
Sponsor

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

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

3D hover plane effect By Rian Ariona

根据鼠标位置来变换效果，很好玩，当然需要一些JS来实现。
3d-hover-1
查看演示

Hover effects with CSS3 By Jacob Stone

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

iHover by gudh

circle-12
查看演示

Image hover effect By Hervé

这个CSS HOVER效果很弦，花式很多，喜欢的一个一个试试。
image-hover-effect-3
查看演示

Social buttons with hover By Marius Balaj

social-button-4
查看演示

Pure CSS SVG Hover Interaction. By Chris

svg-css3-hover-5
查看演示

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

direction-aware-3d-hover-6
查看演示

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

text-shadow-7
查看演示

Ideas for Subtle Hover Effects by Mary Lou

subtle-hover-effect-8
查看演示

3 Cool CSS3 Image Hover Effects by Samuel Norton

cool-image-effects-9
查看演示

Simple hover effects with CSS(webkit) filters by thecodeplayer

simple-hover-webkit-10
查看演示

Image Overlay Hover Effects With CSS3 Transitions by callmenick

image-overlay-11
查看演示

Image Overlay Hover Effect By Arnaud Balland

image-overlay-13
查看演示

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

hover-intent-14
查看演示

Stylish Social Buttons By Chris Deacy

social-button-15
查看演示

Button Hover Fill By Keenan Staffieri

contact-button-16
查看演示

Morphing bullets to icons By Tiffany Rayside

hover-svg-17
查看演示

Animated Gradient Buttons By JamieKDonnelly

animated-gradient-buttons-18
查看演示

Perspective Shadow By Graham Pyne

perspective-shadow-18
查看演示

Collection of Button Hover Effects By David Conner

button-hover-effects-20
查看演示

3d Hover Design Interaction By Bhakti Al Akbar Pasaribu

image-hover-21
查看演示

Easy way to change Text By Jintos

easy-way-change-text-22
查看演示

Hover Intent – Like button By Sam Lillicrap

hover-intent-like-button-23
查看演示

Reminders Icon Hover Effect By Matteo Bertoldo

reminder-icon-hover-effect-24
查看演示

Hover Animation from UNIQLO By Chris Coyier

hover-animation-25
查看演示

3D Skew Menu on Hover By Martin Whitaker

3d-skew-26
查看演示

CSS3 Hover Effects By honglio

css3-hover-27
查看演示

“Stupid” Case Study Hover By Eric Grucza

css3-hover-28
查看演示

Profile CSS Hover By Eric Rogg

profile-hover-effect-29
查看演示

Transitional Buttons By Vitaliy

awesome-button-hover-30
查看演示

Hover Accordion Full Screen ( Triple ) By Clifford Ryan Nelson

accordion-31
查看演示

更多CSS文章，请浏览：
在图形界面上制作CSS3动画：cssanimate
CSS3动画属性实用技巧教程
20款CSS按钮鼠标HOVER效果展示

整理自：bashooka

赞助商链接

与 、 相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论One Response to “30个帅气的鼠标悬停效果”

  1. 闻风送墨香 - 回复
    2015 年 05 月 19 日 上午 10:40

    cool!


{ 发表评论 }