Web页面中5种超酷的Hover效果

给平淡的站点带来活力hover效果能给网页增加一些动态效果并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果但是随着CSS3的引入和现代浏览器的支持我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器更多的是指以Mozilla和Webkit为核心的浏览器IE的表现稍微差强人意所以请使用FireFoxSafari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。向上跳跃这种效果非常适合于当页面上有一横排图片的场景当鼠标hover时就产生波浪一样的效果。这个效果实现是非常简单的并且有多种方法实现如下的核心实现方法是初始给所有图片设置margin当hover时给相应的图片减少margin的值这样就实现了向上跳跃的效果。这种效果不光可以应用于图片一般的横向排列的导航栏也可以应用这样的效果。效果中的透明效果是并不是必须的不设置透明属性并不影响hover时的跳跃效果加上透明只是为了让效果更平滑。CSS代码123456789101112.ex1img{border:5pxsolid#ccc;float:left;margin:15px;-webkit-transition: margin0.5s ease-out;-moz-transition: margin0.5s ease-out;-o-transition: margin0.5s ease-out;}.ex1img:hover {margin-top:2px;}查看Demo层叠与放大这种效果类似于熔岩灯效果当鼠标从上至下移动时每个图片都是慢慢地放大然后恢复到原始的状态。为了实现这样的效果首先把原始图片显示的时候缩小一点当鼠标hover时放大图片的尺寸。因为图片是居中显示的所以当鼠标hover时也增加了图片的margin这样使得当图片放大时也是居中的效果。CSS代码1234567891011121314151617181920/*Example 2*/#container {width:300px;margin:0auto;}#ex2img{height:100px;width:300px;margin:15px0;-webkit-transition:all1s ease;-moz-transition:all1s ease;-o-transition:all1s ease;}#ex2img:hover {height:133px;width:400px;margin-left:-50px;}查看Demo文字淡入类似的这种效果一般是用JavaScript来实现的当hover其中某个元素时另一个元素发生一些变化。本例为了实现这一效果首先把图片和文字放在一个div里然后设置div的colortransparent和line-height:0px。当hover时更改color和line-height属性使得文字显示。CSS代码1234567891011121314151617181920212223#ex3{width:730px;height:133px;line-height:0px;color:transparent;font-size:50px;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:300;text-transform:uppercase;-webkit-transition:all0.5s ease;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;}#ex3:hover {line-height:133px;color:#575858;}#ex3img{float:left;margin:015px;}查看Demo旋转的图片实现这个效果是非常容易的但是因为这是一个非常重要的效果尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分transition是为了让效果更平滑。CSS代码123456789101112131415161718192021#ex4{width:800px;margin:0auto;}#ex4img {margin:20px;border:5pxsolid#eee;-webkit-box-shadow:4px4px4pxrgba(0,0,0,0.2);-moz-box-shadow:4px4px4pxrgba(0,0,0,0.2);box-shadow:4px4px4pxrgba(0,0,0,0.2);-webkit-transition:all0.5s ease-out;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;}#ex4img:hover {-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}查看Demo淡入和倒影这个效果是相对复杂的效果首先设置减少图片的初始的透明度当hover时把透明度设置回默认值另外会有一个图片边缘发光的效果和倒影效果只在以Webkit为内核的浏览器中起作用。如果你对倒影效果不太懂的话可以参考这篇文章Image Reflections with CSSCSS代码1234567891011121314151617181920212223242526272829303132#ex5{width:700px;margin:0auto;min-height:300px;}#ex5img {margin:25px;opacity:0.8;border:10pxsolid#eee;/*Transition*/-webkit-transition:all0.5s ease;-moz-transition:all0.5s ease;-o-transition:all0.5s ease;/*Reflection*/-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom, from(transparent), color-stop(.7,transparent), to(rgba(0,0,0,0.1)));}#ex5img:hover {opacity:1;/*Reflection*/-webkit-box-reflect:below0px-webkit-gradient(linear,lefttop,leftbottom, from(transparent), color-stop(.7,transparent), to(rgba(0,0,0,0.4)));/*Glow*/-webkit-box-shadow:0px0px20pxrgba(255,255,255,0.8);-moz-box-shadow:0px0px20pxrgba(255,255,255,0.8);box-shadow:0px0px20pxrgba(255,255,255,0.8);}查看Demo总结经过测试这些效果在以Webkit为核心的浏览器上表现最出色Mozilla次之IE最差如果要使得在IE9中的效果更好则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果应该会给你带来一些设计上的灵感你可以综合运用这些CSS样式并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果欢迎参与讨论。编注以上的五种CSS Hover效果都应用了最新的CSS3效果在现代的浏览器中应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9IE9不支持transition和transform这两种效果使得这五种效果在IE9下表现的不佳寄希望于IE10吧。文章编译来源5 Cool CSS Hover Effects You Can Copy and Paste