建站
咨詢
售后
建站咨詢
新聞中心
給平淡的站點(diǎn)帶來活力
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括伊犁網(wǎng)站建設(shè)、伊犁網(wǎng)站制作、伊犁網(wǎng)頁制作以及伊犁網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，伊犁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到伊犁省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
hover效果能給網(wǎng)頁增加一些動(dòng)態(tài)效果，并且使得站點(diǎn)更具有活力。原來的做法是使用javascript來實(shí)現(xiàn)這些動(dòng)態(tài)效果，但是隨著CSS3的引入和現(xiàn)代瀏覽器的支持，我們可以用純粹的CSS代碼來實(shí)現(xiàn)這些有趣的效果。所謂的現(xiàn)代瀏覽器，更多的是指以Mozilla和Webkit為核心的瀏覽器，IE的表現(xiàn)稍微差強(qiáng)人意，所以請(qǐng)使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介紹的5個(gè)非?？岬募僀SS hover 效果。
向上跳躍
這種效果非常適合于當(dāng)頁面上有一橫排圖片的場景，當(dāng)鼠標(biāo)hover時(shí)就產(chǎn)生波浪一樣的效果。
這個(gè)效果實(shí)現(xiàn)是非常簡單的，并且有多種方法實(shí)現(xiàn)，如下的核心實(shí)現(xiàn)方法是：初始給所有圖片設(shè)置mergin，當(dāng)hover時(shí)，給相應(yīng)的圖片減少mergin的值，這樣就實(shí)現(xiàn)了向上跳躍的效果。
這種效果不光可以應(yīng)用于圖片，一般的橫向排列的導(dǎo)航欄也可以應(yīng)用這樣的效果。
效果中的透明效果是并不是必須的，不設(shè)置透明屬性并不影響hover時(shí)的跳躍效果，加上透明只是為了讓效果更平滑。
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)鼠標(biāo)從上至下移動(dòng)時(shí)，每個(gè)圖片都是慢慢地放大然后恢復(fù)到原始的狀態(tài)。
為了實(shí)現(xiàn)這樣的效果，首先把原始圖片顯示的時(shí)候縮小一點(diǎn)，當(dāng)鼠標(biāo)hover時(shí)，放大圖片的尺寸。
因?yàn)閳D片是居中顯示的，所以當(dāng)鼠標(biāo)hover時(shí)，也增加了圖片的margin，這樣使得當(dāng)圖片放大時(shí)也是居中的效果。
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來實(shí)現(xiàn)的，當(dāng)hover其中某個(gè)元素時(shí)，另一個(gè)元素發(fā)生一些變化。本例為了實(shí)現(xiàn)這一效果，首先把圖片和文字放在一個(gè)div里，然后設(shè)置div的color：transparent和line-height:0px。當(dāng)hover時(shí)，更改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)的圖片
實(shí)現(xiàn)這個(gè)效果是非常容易的，但是因?yàn)檫@是一個(gè)非常重要的效果，尤其對(duì)于畫廊中的縮略圖。這個(gè)效果中我們使用了一些較新的CSS樣式。這個(gè)例子使用了box-shadows,transitions和transforms。transform是實(shí)現(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
淡入和倒影
這個(gè)效果是相對(duì)復(fù)雜的效果，首先，設(shè)置減少圖片的初始的透明度，當(dāng)hover時(shí)，把透明度設(shè)置回默認(rèn)值，另外會(huì)有一個(gè)圖片邊緣發(fā)光的效果和倒影效果(只在以Webkit為內(nèi)核的瀏覽器中起作用)。
如果你對(duì)倒影效果不太懂的話，可以參考這篇文章(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庫。以上的這五個(gè)純CSS實(shí)現(xiàn)的hover效果，應(yīng)該會(huì)給你帶來一些設(shè)計(jì)上的靈感，你可以綜合運(yùn)用這些CSS樣式，并加入一些其他的CSS來產(chǎn)生一些有意思的效果。如果你也有一些非常酷的CSS效果，歡迎參與討論。
編注
以上的五種CSS Hover效果都應(yīng)用了***的CSS3效果，在現(xiàn)代的瀏覽器中，應(yīng)用這些CSS能展現(xiàn)出非常漂亮的效果。值得一提的是IE9，IE9不支持transition和transform這兩種效果，使得這五種效果在IE9下表現(xiàn)的不佳，寄希望于IE10吧。
原文鏈接：http://www.cnblogs.com/powertoolsteam/archive/2011/05/10/2042142.html
當(dāng)前題目：5種超酷的Web頁面中Hover效果
網(wǎng)站地址：http://www.dlmjj.cn/article/djpphhd.html
