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) //陰影作的懸浮效果
}