Web頁面中5種超酷的Hover效果

hover 效果能給網頁增長一些動態效果，而且使得站點更具備活力。原來的作法是使用javascript來實現這些動態效果，可是隨着CSS3的引入和現代瀏覽器 的支持，咱們能夠用純粹的CSS代碼來實現這些有趣的效果。所謂的現代瀏覽器，更多的是指以Mozilla和Webkit爲核心的瀏覽器，IE的表現稍微 差強人意，因此請使用FireFox，Safari或者Chrome查看一下的效果。以下就是要介紹的5個很是酷的純CSS hover 效果。

一、 向上跳躍

Click Here to Launch

這種效果很是適合於當頁面上有一橫排圖片的場景，當鼠標hover時就產生波浪同樣的效果。

這個效果實現是很是簡單的，而且有多種方法實現，以下的核心實現方法是：初始給全部圖片設置margin，當hover時，給相應的圖片減小margin的值，這樣就實現了向上跳躍的效果。

這種效果不光能夠應用於圖片，通常的橫向排列的導航欄也能夠應用這樣的效果。

效果中的透明效果是並非必須的，不設置透明屬性並不影響hover時的跳躍效果，加上透明只是爲了讓效果更平滑。

css代碼

 

1 2 3 4 5 6 7 8 9 10 11 12

.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; }

 

　　層疊與放大

 

Click Here to Launch

這種效果相似於熔岩燈效果，當鼠標從上至下移動時，每一個圖片都是慢慢地放大而後恢復到原始的狀態。

 

爲了實現這樣的效果，首先把原始圖片顯示的時候縮小一點，當鼠標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: 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; }

　

　文字淡入

 

 Click Here to Launch

類 似的這種效果，通常是用JavaScript來實現的，當hover其中某個元素時，另外一個元素髮生一些變化。本例爲了實現這一效果，首先把圖片和文字放 在一個div裏，而後設置div的color：transparent和line-height:0px。當hover時，更改color和line- height屬性，使得文字顯示。

 

CSS代碼

 

 1 #ex3 {
 2     width: 730px;
 3     height: 133px;
 4     line-height: 0px;
 5     color: transparent;
 6     font-size: 50px;
 7     font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 8        font-weight: 300;
 9     text-transform: uppercase;
10     -webkit-transition: all 0.5s ease;
11     -moz-transition: all 0.5s ease;
12     -o-transition: all 0.5s ease;
13 }
14   
15 #ex3:hover {
16     line-height: 133px;
17     color: #575858;
18 }
19   
20 #ex3 img{
21     float: left;
22     margin: 0 15px;
23 }

 

旋轉的圖片

 

Click Here to Launch

 

實 現這個效果是很是容易的，可是由於這是一個很是重要的效果，尤爲對於畫廊中的縮略圖。這個效果中咱們使用了一些較新的CSS樣式。這個例子使用了box- shadows,transitions和transforms。transform是實現旋轉部分，transition是爲了讓效果更平滑。

CSS代碼

 

 1 #ex4 {
 2     width: 800px;
 3     margin: 0 auto;
 4 }
 5   
 6 #ex4 img {
 7     margin: 20px;
 8     border: 5px solid #eee;
 9     -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
10     -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
11     box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
12     -webkit-transition: all 0.5s ease-out;
13     -moz-transition: all 0.5s ease;
14     -o-transition: all 0.5s ease;
15 }
16   
17 #ex4 img:hover {
18     -webkit-transform: rotate(-7deg);
19     -moz-transform: rotate(-7deg);
20     -o-transform: rotate(-7deg);
21 }

 

 

 

 

 

　　淡入和倒影

 

 Click Here to Launch

這個效果是相對複雜的效果，首先，設置減小圖片的初始的透明度，當hover時，把透明度設置回默認值，另外會有一個圖片邊緣發光的效果和倒影效果（只在以Webkit爲內核的瀏覽器中起做用）。

 

CSS代碼

 1 #ex5 {
 2     width: 700px;
 3     margin: 0 auto;
 4     min-height: 300px;
 5 }
 6   
 7 #ex5 img {
 8     margin: 25px;
 9     opacity: 0.8;
10     border: 10px solid #eee;
11   
12     /*Transition*/
13     -webkit-transition: all 0.5s ease;
14     -moz-transition: all 0.5s ease;
15     -o-transition: all 0.5s ease;
16   
17     /*Reflection*/
18     -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)));
19 }
20   
21   
22 #ex5 img:hover {  
23    opacity: 1;
24   
25    /*Reflection*/
26   -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)));
27   
28    /*Glow*/
29   -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
30   -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
31   box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
32 }