本篇文章給大家分享的是有關(guān)Web頁面中的Hover效果有哪些，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、坡頭網(wǎng)站維護、網(wǎng)站推廣。

給平淡的站點帶來活力

hover效果能給網(wǎng)頁增加一些動態(tài)效果，并且使得站點更具有活力。原來的做法是使用javascript來實現(xiàn)這些動態(tài)效果，但是隨著CSS3的引入和現(xiàn)代瀏覽器的支持，我們可以用純粹的CSS代碼來實現(xiàn)這些有趣的效果。所謂的現(xiàn)代瀏覽器，更多的是指以Mozilla和Webkit為核心的瀏覽器，IE的表現(xiàn)稍微差強人意，所以請使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介紹的5個非常酷的純CSS hover 效果。

向上跳躍

這種效果非常適合于當(dāng)頁面上有一橫排圖片的場景，當(dāng)鼠標hover時就產(chǎn)生波浪一樣的效果。

這個效果實現(xiàn)是非常簡單的，并且有多種方法實現(xiàn)，如下的核心實現(xiàn)方法是：初始給所有圖片設(shè)置mergin，當(dāng)hover時，給相應(yīng)的圖片減少mergin的值，這樣就實現(xiàn)了向上跳躍的效果。

這種效果不光可以應(yīng)用于圖片，一般的橫向排列的導(dǎo)航欄也可以應(yīng)用這樣的效果。

效果中的透明效果是并不是必須的，不設(shè)置透明屬性并不影響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

層疊與放大

這種效果類似于熔巖燈效果，當(dāng)鼠標從上至下移動時，每個圖片都是慢慢地放大然后恢復(fù)到原始的狀態(tài)。

為了實現(xiàn)這樣的效果，首先把原始圖片顯示的時候縮小一點，當(dāng)鼠標hover時，放大圖片的尺寸。

因為圖片是居中顯示的，所以當(dāng)鼠標hover時，也增加了圖片的margin，這樣使得當(dāng)圖片放大時也是居中的效果。

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來實現(xiàn)的，當(dāng)hover其中某個元素時，另一個元素發(fā)生一些變化。本例為了實現(xiàn)這一效果，首先把圖片和文字放在一個div里，然后設(shè)置div的color：transparent和line-height:0px。當(dāng)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

旋轉(zhuǎn)的圖片

實現(xiàn)這個效果是非常容易的，但是因為這是一個非常重要的效果，尤其對于畫廊中的縮略圖。這個效果中我們使用了一些較新的CSS樣式。這個例子使用了box-shadows,transitions和transforms。transform是實現(xiàn)旋轉(zhuǎn)部分，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

淡入和倒影

這個效果是相對復(fù)雜的效果，首先，設(shè)置減少圖片的初始的透明度，當(dāng)hover時，把透明度設(shè)置回默認值，另外會有一個圖片邊緣發(fā)光的效果和倒影效果(只在以Webkit為內(nèi)核的瀏覽器中起作用)。

如果你對倒影效果不太懂的話，可以參考這篇文章(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

總結(jié)

經(jīng)過測試，這些效果在以Webkit為核心的瀏覽器上表現(xiàn)最出色，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，則需要其它的第三方JS庫。以上的這五個純CSS實現(xiàn)的hover效果，應(yīng)該會給你帶來一些設(shè)計上的靈感，你可以綜合運用這些CSS樣式，并加入一些其他的CSS來產(chǎn)生一些有意思的效果。如果你也有一些非?？岬腃SS效果，歡迎參與討論。

以上的五種CSS Hover效果都應(yīng)用了CSS3效果，在現(xiàn)代的瀏覽器中，應(yīng)用這些CSS能展現(xiàn)出非常漂亮的效果。值得一提的是IE9，IE9不支持transition和transform這兩種效果，使得這五種效果在IE9下表現(xiàn)的不佳，寄希望于IE10吧。

以上就是Web頁面中的Hover效果有哪些，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：Web頁面中的Hover效果有哪些
鏈接分享：http://chinadenli.net/article24/jeijce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、小程序開發(fā)、企業(yè)建站、網(wǎng)站維護

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)