HTML页⾯中5种超酷的伪类选择器：hover效果
想在⾃⼰的⽹站中应⽤超酷的hover效果吗？也许你可以从如下的这些实例中获得⼀些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应⽤到你的站点。
给平淡的站点带来活⼒
hover效果能给⽹页增加⼀些动态效果，并且使得站点更具有活⼒。原来的做法是使⽤javascript来实现这些动态效果，但是随着CSS3的引⼊和现代浏览器的⽀持，我们可以⽤纯粹的CSS 代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核⼼的浏览器，IE的表现稍微差强⼈意，所以请使⽤FireFox，Safari或者Chrome查看⼀下的效果。如下就是要介绍的5个⾮常酷的纯CSS hover 效果。
向上跳跃
这种效果⾮常适合于当页⾯上有⼀横排图⽚的场景，当⿏标hover时就产⽣波浪⼀样的效果。
这个效果实现是⾮常简单的，并且有多种⽅法实现，如下的核⼼实现⽅法是：初始给所有图⽚设置margin，当hover时，给相应的图⽚减少margin的值，这样就实现了向上跳跃的效果。这种效果不光可以应⽤于图⽚，⼀般的横向排列的导航栏也可以应⽤这样的效果。
效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。
CSS代码：
1 2 3 4 5 6 7 8 9 10 1img{
border: 5px solid#ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;    -moz-transition: margin 0.5s ease-out;    -o-transition: margin 0.5s ease-out;
}
.ex1img:hover {
margin-top: 2px;
}
层叠与放⼤
这种效果类似于熔岩灯效果，当⿏标从上⾄下移动时，每个图⽚都是慢慢地放⼤然后恢复到原始的状态。
为了实现这样的效果，⾸先把原始图⽚显⽰的时候缩⼩⼀点，当⿏标hover时，放⼤图⽚的尺⼨。
因为图⽚是居中显⽰的，所以当⿏标hover时，也增加了图⽚的margin，这样使得当图⽚放⼤时也是居中的效果。CSS代码
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20/*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;
}
⽂字淡⼊
类似的这种效果，⼀般是⽤JavaScript来实现的，当hover其中某个元素时，另⼀个元素发⽣⼀些变化。本例为了实现这⼀效果，⾸先把图⽚和⽂字放在⼀个div⾥，然后设置div的color：transparent和line-height:0px。当hover时，更改color和line-height属性，使得⽂字显⽰。
CSS代码
1
2 3 4#ex3{
width: 730px;    height: 133px;
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23    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;
}
旋转的图⽚
实现这个效果是⾮常容易的，但是因为这是⼀个⾮常重要的效果，尤其对于画廊中的缩略图。这个效果中我们使⽤了⼀些较新的CSS样式。这个例⼦使⽤了box-shadows,transitions和transforms。transform是实现旋转部分，transition是为了让效果更平滑。
CSS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21#ex4{
width: 800px;
margin: 0auto;
}
#ex4img {
margin: 20px;
border: 5px solid#eee;
-webkit-box-shadow: 4px4px4px rgba(0,0,0,0.2);    -moz-box-shadow: 4px4px4px rgba(0,0,0,0.2);    box-shadow: 4px4px4px rgba(0,0,0,0.2);
html特效代码照片
-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);
}
淡⼊和倒影
这个效果是相对复杂的效果，⾸先，设置减少图⽚的初始的透明度，当hover时，把透明度设置回默认值，另外会有⼀个图⽚边缘发光的效果和倒影效果（只在以Webkit为内核的浏览器中起作⽤）。
如果你对倒影效果不太懂的话，可以参考这篇⽂章（）
CSS代码
1
2 3 4 5 6 7 8 9 10 11 12 13 14#ex5{
width: 700px;
margin: 0auto;
min-height: 300px;
}
#ex5img {
margin: 25px;
opacity: 0.8;
border: 10px solid#eee;
/*Transition*/
-webkit-transition: all0.5s ease;    -moz-transition: all0.5s ease;
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32    -o-transition: all0.5s ease;
/*Reflection*/
-webkit-box-reflect: below0px-webkit-gradient(linear, left top, left bottom, 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, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));  /*Glow*/
-webkit-box-shadow: 0px0px20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px0px20px rgba(255,255,255,0.8);
box-shadow: 0px0px20px rgba(255,255,255,0.8);
}
总结
经过测试，这些效果在以Webkit为核⼼的浏览器上表现最出⾊，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，则需要其它的第三⽅JS库。以上的这五个纯CSS实现的hover效果，应该会给你带来⼀些设计上的灵感，你可以综合运⽤这些CSS样式，并加⼊⼀些其他的CSS来产⽣⼀些有意思的效果。如果你也有⼀些⾮常酷的CSS效果，欢迎参与讨论。
编注
以上的五种CSS Hover效果都应⽤了最新的CSS3效果，在现代的浏览器中，应⽤这些CSS能展现出⾮常漂亮的效果。值得⼀提的是IE9，IE9不⽀持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄希望于IE10吧。
⽂章编译来源（）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。