導航條對於每一個Web前端攻城獅來說並不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對用戶來說是十分具有視覺衝擊力的。 本次分享的主題：通過CSS3來製作類似下麵的導航條和毛玻璃效果。 導航條是梯形形狀的。 背景區域的毛玻璃效果。 把 ...
導航條對於每一個Web前端攻城獅來說並不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對用戶來說是十分具有視覺衝擊力的。
本次分享的主題：通過CSS3來製作類似下麵的導航條和毛玻璃效果。
導航條是梯形形狀的。
背景區域的毛玻璃效果。
把導航條和毛玻璃效果在一篇文章中分享其實是有原因的。因為這兩個效果的實現離不開一個重要的思想。
用語言來描述就是：父元素設置position:relative，其偽元素（after或者before）設置 position:absolute，並且讓top,bottom,left,right都為0，偽元素占滿父元素的整個空間，最後設置z-index將背景放在父元素後邊。
具體代碼如下。
.container { position: relative; } .container::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0;
z-index: -1; }
什麼意思呢？稍安勿躁，我會在接下來的兩個實戰例子中對這段代碼的意思一一道來。
文章結構：
1.導航條
1.1：平行四邊形導航條
1.2：梯形導航條
2.毛玻璃效果
3.結束語
4.參考文章
1.導航條
1.1：平行四邊形導航條
平行四邊形製作的思想：平行四邊形的製作運用了CSS3 2D 變形中的skew()傾斜屬性，因為我們只是在水平方向上傾斜，所以在使用skew()時需要將第二個參數指定為0，否則x，y軸方向都會發生傾斜，這並不是我們想要的效果。或者是使用skewX()。具體的代碼實現如下。
<div class="rascal"> <ul> <li>博客園</li> <li>首頁</li> <li>新隨筆</li> <li>聯繫</li> <li>訂閱</li> <li>管理</li> </ul> </div>平行四邊形導航條HTML
.keith li { position: relative; } .keith li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; background: #2175BC; -moz-transform: skewX(-25deg); -ms-transform: skewX(-25deg); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } .keith li:hover::after { background: #2586D7; }
上面代碼中，只顯示了部分重要部分。在設置平行四邊形的時候需要註意以下幾點：
1.給 li 元素設置relative，然後偽元素after設置absolute和LRBT四個方向的定位。原因在於我們需要讓偽元素相對與 li 元素定位，並且讓偽元素填滿整個 li 元素的空間，這樣的話給偽元素設置的背景就會鋪滿整個 li 元素 。最重要的是，在偽元素上設置skewX()，只會對偽元素進行傾斜，並不會對父元素上的文字進行傾斜。
2.設置z-index:-1。這裡如果不設置z-index值為負值的話，就看不到在 li 元素裡面的文字了，因為absolute會提高自身元素的層級，所以要讓偽元素z-index為-1，讓其的層級位居 li 元素之後。
3.使用skewX()函數讓 偽元素（不是 li 元素） 元素旋轉 25度，註意寫上屬性首碼，防止瀏覽器相容性問題。
4.將偽元素和偽類結合使用的時候，必須要註意的是先偽類，再偽元素。如果是li::after:hover 這樣設置的話是沒有任何效果的。正確的寫法：li:hover::after。
示例效果如下。
（hover狀態）
1.2：梯形導航條
梯形導航條的是實現思想：梯形導航條使用了CSS3 3D 變形中的三個屬性：perspective()，rotateX()和transform-origin。
perspective()是用於設置用戶和元素3D空間Z平面之間的距離，值越小，用戶與3D空間Z平面距離越近，視覺效果會明顯；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果越小。
ratateX()是用於3D空間中x軸的旋轉，大家可以想象一下在高中時期學的空間直角坐標系，跟那個x軸的旋轉是一樣的道理。
transform-origin是用於指定元素的旋轉中心點位置。
具體屬性的使用方法可以去查閱相關文檔，這裡就不再贅述了。具體代碼實現如下：
<div class="keith"> <ul> <li>博客園</li> <li>首頁</li> <li>新隨筆</li> <li>聯繫</li> <li>訂閱</li> <li>管理</li> </ul> </div>梯形導航條HTML
$('.keith li').click(function(event) {
$('.keith li').removeClass('zIndex');
$(this).addClass('zIndex');
});
JS代碼
.keith li { position: relative; } .keith li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: #2175BC; -moz-transform: perspective(0.5em) rotateX(5deg); -ms-transform: perspective(0.5em) rotateX(5deg); -webkit-transform: perspective(0.5em) rotateX(5deg); transform: perspective(0.5em) rotateX(5deg); -moz-transform-origin: bottom; -webkit-transform-origin: bottom; transform-origin: bottom; } .keith li:hover::after { background: #3B9BE5; }
上面代碼中，只顯示重要部分。註意以下幾個問題：
1.前四個問題與平行四邊形導航條的製作思路基本相同。其中，在偽元素上設置perspective()和rotateX()，只會對偽元素進行3D處理和在空間中X軸的旋轉，並不會對父元素上的文字進行任何的處理。文字還是會按照預設效果顯示。如果在父元素上設置perspective()和rotateX()，則會影響之後的所有子元素。也就是所有的子元素（包括文字）都會進行旋轉。文字被旋轉了，閱讀十分困難的。這個邏輯應該不難理解。
2.用於控制梯形是左傾斜還是右傾斜的屬性是transform-origin。梯形不傾斜：bottom。左傾斜：bottom left；右傾斜：bottom right。
示例效果如下：
（切換狀態）
（左傾斜）
（右傾斜）
2.毛玻璃效果
毛玻璃的實現思想：毛玻璃使用了CSS3中的backgroung-size，fiter濾鏡的原理。
background-size屬性用於指定背景圖片的尺寸，其中的一個參數cover是將背景圖片放大，以適合鋪滿整個容器。但是這個屬性使用的前提是需要設定一張足夠大尺寸的圖片，否則會導致背景圖片失真。
fiter濾鏡中的blur()用於將圖片進行高斯模糊處理，只接受單位值，值越大，模糊效果越明顯。
在張鑫旭老師的一篇關於毛玻璃實現的文章中（會在參考文章中給出鏈接），給出了毛玻璃實現的效果，可是有一些小問題：如果在背景圖片上加上文字，blur()會將文字一起模糊掉，這樣的話會用戶體驗不太好。當然，在不需要文字的背景圖片下，張鑫旭老師的方案還是很棒的。
以下給出具體代碼：
<div class="rascal"> My Name is Uncle-Keith！ </div>毛玻璃HTML
body { background: url("../images/family-one.jpg") no-repeat center center fixed; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .rascal { position: relative; background: rgba(255, 255, 255, 0.3); overflow: hidden; } .rascal::after { z-index: -1; content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url("../images/family-one.jpg") no-repeat center center fixed; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; -webkit-filter: blur(20px); filter: blur(20px); margin: -30px; }
上面代碼中，需要註意幾個問題：
1.同樣這裡也是使用父元素relative，偽元素absolute的方法，並且設置了TBLR和z-index。使用這種方法的關鍵之處在於我們是對偽元素進行了blur()處理，這樣並不會影響到父元素中的文字效果。
2.需要給背景圖片添加background-size屬性，這個是為了讓圖片自適應整個屏幕的寬度。另外，這個屬性需要添加兩次。一是在body元素上，一是在偽元素上。在偽元素上添加的原因是我們要讓blur()處理模糊的圖片與背景圖片相同。如果在偽元素中給background設置inherit的話，只會繼承父容器rascal的背景，而rascal容器是一個白色背景的容器，這樣就與我們的效果不相同了。下圖是在偽元素中使用background:inherit;的毛玻璃效果。
這並不是我們想要的毛玻璃效果。所以偽元素上background的設置應該與背景圖片是相同的。
3.在為偽元素設置正確的background之後，我們要使用margin負值模糊邊緣消退的問題。
可以看到，毛玻璃中的blur()效果有點過猶不及了，一圈模糊效果超出了容器，給父元素設置overflow:hidden，可以將超出的部分剪切掉。最終的示例效果如下。
最終效果看起來就很自然了。
3.結束語
三個實例中，有一個共同的思想：將CSS3的傾斜，透視，旋轉和濾鏡效果都放在偽元素中，並且給父元素設置relative，偽元素設置absolute，讓偽元素的寬度和高度撐滿父元素的整個區域，最後設置偽元素的z-index為負值。這樣做的好處就是不會影響父容器中的文字。
具體的代碼如下：
.container { position: relative; } .container::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; }
4.參考文章
完。感謝大家的閱讀。
轉載請註明出處：http://www.cnblogs.com/Uncle-Keith/p/5943158.html
