CSS 5种很炫的Hover效果。跳，放大，旋转，淡入，悬浮

给平淡的站点带来活力

hover效果能给网页增长一些动态效果，而且使得站点更具备活力。原来的作法是使用javascript来实现这些动态效果，可是随着CSS3的引入和现代浏览器的支持，咱们能够用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，因此请使用FireFox，Safari或者Chrome查看一下的效果。以下就是要介绍的5个很是酷的纯CSS hover 效果。

向上跳跃

这种效果很是适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪同样的效果。

这个效果实现是很是简单的，而且有多种方法实现，以下的核心实现方法是：初始给全部图片设置mergin，当hover时，给相应的图片减小mergin的值，这样就实现了向上跳跃的效果。

这种效果不光能够应用于图片，通常的横向排列的导航栏也能够应用这样的效果。

效果中的透明效果是并非必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。

CSS代码：

.ex1 img{      
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;  
}     

.ex1 img:hover {      
margin-top: 2px;  
}

 

查看Demo

层叠与放大

这种效果相似于熔岩灯效果，当鼠标从上至下移动时，每一个图片都是慢慢地放大而后恢复到原始的状态。

为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。

由于图片是居中显示的，因此当鼠标hover时，也增长了图片的margin，这样使得当图片放大时也是居中的效果。

CSS代码

/*Example 2*/ #container {      
width: 300px;      
margin: 0 auto;  
}     

#ex2 img{      
height: 100px;      
width: 300px;     
 margin: 15px 0;       
 -webkit-transition: all 1s ease;     
  -moz-transition: all 1s ease;      
  -o-transition: all 1s ease;  
  }     
  
  #ex2 img:hover {     
   height: 133px;      
   width: 400px;      
   margin-left: -50px;  
   
   }

 

查看Demo

文字淡入

相似的这种效果，通常是用JavaScript来实现的，当hover其中某个元素时，另外一个元素发生一些变化。本例为了实现这一效果，首先把图片和文字放在一个div里，而后设置div的color：transparent和line-height:0px。当hover时，更改color和line-height属性，使得文字显示。

CSS代码

#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: all 0.5s ease;      
-moz-transition: all 0.5s ease;      
-o-transition: all 0.5s ease;  
}     

#ex3:hover {     
 line-height: 133px;     
  color: #575858;  
  }    
  
 #ex3 img{     
  float: left;      
  margin: 0 15px;  
   }

 

查看Demo

旋转的图片

实现这个效果是很是容易的，可是由于这是一个很是重要的效果，尤为对于画廊中的缩略图。这个效果中咱们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分，transition是为了让效果更平滑。

CSS代码

#ex4 {      
width: 800px;     
 margin: 0 auto;  
 }     
 
 #ex4 img {     
  margin: 20px;      
  border: 5px solid #eee;      
  -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);      
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);      
  box-shadow: 4px 4px 4px rgba(0,0,0,0.2);      
  -webkit-transition: all 0.5s ease-out;     
   -moz-transition: all 0.5s ease;      
   -o-transition: all 0.5s ease;  
   }     
   
   #ex4 img:hover {      
   -webkit-transform: rotate(-7deg);      
   -moz-transform: rotate(-7deg);      
   -o-transform: rotate(-7deg);  
   }

 

查看Demo

淡入和倒影

这个效果是相对复杂的效果，首先，设置减小图片的初始的透明度，当hover时，把透明度设置回默认值，另外会有一个图片边缘发光的效果和倒影效果(只在以Webkit为内核的浏览器中起做用)。

若是你对倒影效果不太懂的话，能够参考这篇文章(Image Reflections with CSS)

CSS代码

#ex5 {      
width: 700px;      
margin: 0 auto;     
 min-height: 300px;  
 }     
 
 #ex5 img {     
  margin: 25px;     
   opacity: 0.8;      
   border: 10px solid #eee;         
   /*Transition*/     
   -webkit-transition: all 0.5s ease;     
    -moz-transition: all 0.5s ease;      
    -o-transition: all 0.5s ease;        
     /*Reflection*/     
     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); 
      }       
      
 #ex5 img:hover {       
 opacity: 1;        
 /*Reflection*/   
 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));       
  /*Glow*/   
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);   
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);    
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
   }

 

查看Demo

总结

通过测试，这些效果在以Webkit为核心的浏览器上表现最出色，Mozilla次之，IE最差，若是要使得在IE9中的效果更好，则须要其它的第三方JS库。以上的这五个纯CSS实现的hover效果，应该会给你带来一些设计上的灵感，你能够综合运用这些CSS样式，并加入一些其余的CSS来产生一些有意思的效果。若是你也有一些很是酷的CSS效果，欢迎参与讨论。

编注

以上的五种CSS Hover效果都应用了最新的CSS3效果，在现代的浏览器中，应用这些CSS能展示出很是漂亮的效果。值得一提的是IE9，IE9不支持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄但愿于IE10吧。

滚动过分效果

查看Demo

.trans_list {
    width: 10%;
    height: 64px;
    margin:10px 0;
    background-color:#486AAA;
    color:#fff;
    text-align:center;
}
.ease {
    ...
    transition: all 4s ease;
}
.ease_in{
    ...
    transition: all 4s ease-in;
}
    .
    .
    .
.trans_box:hover{
    margin-left:89%;
    background-color:#BECEEB;
    color:#333;
    ...
    border-radius:25px;        
    ...
    transform: rotate(360deg);        		
}
HTML代码：
<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div>
</div>

 

 

标签悬浮效果

.hover-shadow{
    transition: all .3s ease;//延时效果
}
.hover-shadow:hover {
    box-shadow: 0 2px 20px rgba(0,0,0,.2) //阴影作的悬浮效果
}