Web頁面中5種超酷的Hover效果
hover 效果能給網頁增加一些動態效果，并且使得站點更具有活力。原來的做法是使用javascript來實現這些動態效果，但是隨著CSS3的引入和現代瀏覽器 的支持，我們可以用純粹的CSS代碼來實現這些有趣的效果。所謂的現代瀏覽器，更多的是指以Mozilla和Webkit為核心的瀏覽器，IE的表現稍微 差強人意，所以請使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介紹的5個非常酷的純CSS hover 效果。
1、 向上跳躍
這種效果非常適合于當頁面上有一橫排圖片的場景，當鼠標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;} |
層疊與放大
這種效果類似于熔巖燈效果，當鼠標從上至下移動時，每個圖片都是慢慢地放大然后恢復到原始的狀態。
為了實現這樣的效果，首先把原始圖片顯示的時候縮小一點，當鼠標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;} |
文字淡入
類 似的這種效果，一般是用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 }
旋轉的圖片
實 現這個效果是非常容易的，但是因為這是一個非常重要的效果，尤其對于畫廊中的縮略圖。這個效果中我們使用了一些較新的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 }
淡入和倒影
這個效果是相對復雜的效果，首先，設置減少圖片的初始的透明度，當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 }
浙公網安備 33010602011771號