- 相關(guān)推薦
CSS3導航條和毛玻璃效果制作方法
導航條對于每一個(gè)Web前端攻城獅來(lái)說(shuō)并不陌生，但是毛玻璃可能會(huì )相對陌生一些。簡(jiǎn)單的說(shuō)，毛玻璃其實(shí)就是讓圖片或者背景使用相應的方法進(jìn)行模糊處理。這種效果對用戶(hù)來(lái)說(shuō)是十分具有視覺(jué)沖擊力的。本次yjbys小編分享的主題是通過(guò)CSS3來(lái)制作類(lèi)似下面的導航條和毛玻璃效果。
導航條是梯形形狀的。
背景區域的毛玻璃效果。
把導航條和毛玻璃效果在一篇文章中分享其實(shí)是有原因的。因為這兩個(gè)效果的實(shí)現離不開(kāi)一個(gè)重要的思想。
用語(yǔ)言來(lái)描述就是：父元素設置position:relative，其偽元素（after或者before）設置 position:absolute，并且讓top,bottom,left,right都為0，偽元素占滿(mǎn)父元素的整個(gè)空間，最后設置z-index將背景放在父元素后邊。
具體代碼如下。
.container {
position: relative;
}
.container::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
什么意思呢？稍安勿躁，我會(huì )在接下來(lái)的兩個(gè)實(shí)戰例子中對這段代碼的意思一一道來(lái)。
1.導航條
1.1：平行四邊形導航條
平行四邊形制作的思想：平行四邊形的制作運用了CSS3 2D 變形中的skew()傾斜屬性，因為我們只是在水平方向上傾斜，所以在使用skew()時(shí)需要將第二個(gè)參數指定為0，否則x，y軸方向都會(huì )發(fā)生傾斜，這并不是我們想要的效果�；蛘呤鞘褂胹kewX()。具體的代碼實(shí)現如下。
平行四邊形導航條HTML
<p class="rascal">
<ul>
<li>博客園</li>
<li>首頁(yè)</li>
<li>新隨筆</li>
<li>聯(lián)系</li>
<li>訂閱</li>
<li>管理</li>
</ul>
</p>
.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;
}
上面代碼中，只顯示了部分重要部分。在設置平行四邊形的時(shí)候需要注意以下幾點(diǎn)：
1.給 li 元素設置relative，然后偽元素after設置absolute和LRBT四個(gè)方向的定位。原因在于我們需要讓偽元素相對與 li 元素定位，并且讓偽元素填滿(mǎn)整個(gè) li 元素的空間，這樣的話(huà)給偽元素設置的背景就會(huì )鋪滿(mǎn)整個(gè) li 元素 。最重要的是，在偽元素上設置skewX()，只會(huì )對偽元素進(jìn)行傾斜，并不會(huì )對父元素上的文字進(jìn)行傾斜。
2.設置z-index:-1。這里如果不設置z-index值為負值的話(huà)，就看不到在 li 元素里面的文字了，因為absolute會(huì )提高自身元素的層級，所以要讓偽元素z-index為-1，讓其的層級位居 li 元素之后。
3.使用skewX()函數讓 偽元素（不是 li 元素） 元素旋轉 25度，注意寫(xiě)上屬性前綴，防止瀏覽器兼容性問(wèn)題。
4.將偽元素和偽類(lèi)結合使用的時(shí)候，必須要注意的是先偽類(lèi)，再偽元素。如果是li::after:hover 這樣設置的話(huà)是沒(méi)有任何效果的。正確的寫(xiě)法：li:hover::after。
示例效果如下。
�。╤over狀態(tài)）
1.2：梯形導航條
梯形導航條的是實(shí)現思想：梯形導航條使用了CSS3 3D 變形中的三個(gè)屬性：perspective()，rotateX()和transform-origin。
perspective()是用于設置用戶(hù)和元素3D空間Z平面之間的距離，值越小，用戶(hù)與3D空間Z平面距離越近，視覺(jué)效果會(huì )明顯；反之，值越大，用戶(hù)與3D空間Z平面距離越遠，視覺(jué)效果越小。
ratateX()是用于3D空間中x軸的旋轉，大家可以想象一下在高中時(shí)期學(xué)的空間直角坐標系，跟那個(gè)x軸的旋轉是一樣的道理。
transform-origin是用于指定元素的旋轉中心點(diǎn)位置。
具體屬性的使用方法可以去查閱相關(guān)文檔，這里就不再贅述了。具體代碼實(shí)現如下：
梯形導航條HTML
<p class="keith">
<ul>
<li>博客園</li>
<li>首頁(yè)</li>
<li>新隨筆</li>
<li>聯(lián)系</li>
<li>訂閱</li>
<li>管理</li>
</ul>
</p>
JS代碼
$('.keith li').click(function(event) {
$('.keith li').removeClass('zIndex');
$(this).addClass('zIndex');
});
.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;
}
上面代碼中，只顯示重要部分。注意以下幾個(gè)問(wèn)題：
1.前四個(gè)問(wèn)題與平行四邊形導航條的制作思路基本相同。其中，在偽元素上設置perspective()和rotateX()，只會(huì )對偽元素進(jìn)行3D處理和在空間中X軸的旋轉，并不會(huì )對父元素上的文字進(jìn)行任何的處理。文字還是會(huì )按照默認效果顯示。如果在父元素上設置perspective()和rotateX()，則會(huì )影響之后的所有子元素。也就是所有的子元素（包括文字）都會(huì )進(jìn)行旋轉。文字被旋轉了，閱讀十分困難的。這個(gè)邏輯應該不難理解。
2.用于控制梯形是左傾斜還是右傾斜的屬性是transform-origin。梯形不傾斜：bottom。左傾斜：bottom left；右傾斜：bottom right。
示例效果如下：
2.毛玻璃效果
毛玻璃的實(shí)現思想：毛玻璃使用了CSS3中的backgroung-size，fiter濾鏡的原理。
background-size屬性用于指定背景圖片的尺寸，其中的一個(gè)參數cover是將背景圖片放大，以適合鋪滿(mǎn)整個(gè)容器。但是這個(gè)屬性使用的前提是需要設定一張足夠大尺寸的圖片，否則會(huì )導致背景圖片失真。
fiter濾鏡中的blur()用于將圖片進(jìn)行高斯模糊處理，只接受單位值，值越大，模糊效果越明顯。
在張?chǎng)涡窭蠋煹囊黄P(guān)于毛玻璃實(shí)現的文章中（會(huì )在參考文章中給出鏈接），給出了毛玻璃實(shí)現的效果，可是有一些小問(wèn)題：如果在背景圖片上加上文字，blur()會(huì )將文字一起模糊掉，這樣的話(huà)會(huì )用戶(hù)體驗不太好。當然，在不需要文字的背景圖片下，張?chǎng)涡窭蠋煹姆桨高�是很棒的。
以下給出具體代碼：
毛玻璃HTML
<p class="rascal">
My Name is Uncle-Keith！
</p>
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;
}
上面代碼中，需要注意幾個(gè)問(wèn)題：
1.同樣這里也是使用父元素relative，偽元素absolute的方法，并且設置了TBLR和z-index。使用這種方法的關(guān)鍵之處在于我們是對偽元素進(jìn)行了blur()處理，這樣并不會(huì )影響到父元素中的文字效果。
2.需要給背景圖片添加background-size屬性，這個(gè)是為了讓圖片自適應整個(gè)屏幕的寬度。另外，這個(gè)屬性需要添加兩次。一是在body元素上，一是在偽元素上。在偽元素上添加的原因是我們要讓blur()處理模糊的圖片與背景圖片相同。如果在偽元素中給background設置inherit的話(huà)，只會(huì )繼承父容器rascal的背景，而rascal容器是一個(gè)白色背景的容器，這樣就與我們的效果不相同了。下圖是在偽元素中使用background:inherit;的毛玻璃效果。
這并不是我們想要的毛玻璃效果。所以偽元素上background的設置應該與背景圖片是相同的。
3.在為偽元素設置正確的background之后，我們要使用margin負值模糊邊緣消退的問(wèn)題。
可以看到，毛玻璃中的blur()效果有點(diǎn)過(guò)猶不及了，一圈模糊效果超出了容器，給父元素設置overflow:hidden，可以將超出的部分剪切掉。最終的示例效果如下。
最終效果看起來(lái)就很自然了。
3.結束語(yǔ)
三個(gè)實(shí)例中，有一個(gè)共同的思想：將CSS3的傾斜，透視，旋轉和濾鏡效果都放在偽元素中，并且給父元素設置relative，偽元素設置absolute，讓偽元素的寬度和高度撐滿(mǎn)父元素的整個(gè)區域，最后設置偽元素的z-index為負值。這樣做的好處就是不會(huì )影響父容器中的文字。
具體的代碼如下：
.container {
position: relative;
}
.container::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
4.參考文章
張?chǎng)涡窭蠋熣劽Ａ?shí)現
阮一峰老師談高斯模糊原理
【CSS3導航條和毛玻璃效果制作方法】相關(guān)文章：
CSS3制作導航條和毛玻璃效果06-08
效果圖制作方法2017最新06-24
淺析CSS3的新功能和新特性09-13
花卷的種類(lèi)和制作方法10-09
css3表單教程10-27
10道韓國料理的材料和制作方法10-11
肚皮舞瘦身的效果和要點(diǎn)06-09
快走和慢跑哪個(gè)健身效果更好09-09