CSS3導(dǎo)航條和毛玻璃效果制作方法

時間：2024-10-14 18:21:57 CSS3

　　導(dǎo)航條對于每一個Web前端攻城獅來說并不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實(shí)就是讓圖片或者背景使用相應(yīng)的方法進(jìn)行模糊處理。這種效果對用戶來說是十分具有視覺沖擊力的。本次yjbys小編分享的主題是通過CSS3來制作類似下面的導(dǎo)航條和毛玻璃效果。

　　導(dǎo)航條是梯形形狀的。

　　背景區(qū)域的毛玻璃效果。

　　把導(dǎo)航條和毛玻璃效果在一篇文章中分享其實(shí)是有原因的。因?yàn)檫@兩個效果的實(shí)現(xiàn)離不開一個重要的思想。

　　用語言來描述就是：父元素設(shè)置position:relative，其偽元素（after或者before）設(shè)置 position:absolute，并且讓top,bottom,left,right都為0，偽元素占滿父元素的整個空間，最后設(shè)置z-index將背景放在父元素后邊。

　　具體代碼如下。

　　.container {

　　position: relative;

　　}

　　.container::after {

　　content: '';

　　position: absolute;

　　left: 0;

　　right: 0;

　　bottom: 0;

　　top: 0;

　　z-index: -1;

　　}

　　什么意思呢？稍安勿躁，我會在接下來的兩個實(shí)戰(zhàn)例子中對這段代碼的意思一一道來。

　　1.導(dǎo)航條

　　1.1：平行四邊形導(dǎo)航條

　　平行四邊形制作的思想：平行四邊形的制作運(yùn)用了CSS3 2D 變形中的skew()傾斜屬性，因?yàn)槲覀冎皇窃谒椒较蛏蟽A斜，所以在使用skew()時需要將第二個參數(shù)指定為0，否則x，y軸方向都會發(fā)生傾斜，這并不是我們想要的效果。或者是使用skewX()。具體的代碼實(shí)現(xiàn)如下。

　　平行四邊形導(dǎo)航條HTML

<ul>

</ul>

　　.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 元素設(shè)置relative，然后偽元素after設(shè)置absolute和LRBT四個方向的定位。原因在于我們需要讓偽元素相對與 li 元素定位，并且讓偽元素填滿整個 li 元素的空間，這樣的話給偽元素設(shè)置的背景就會鋪滿整個 li 元素。最重要的是，在偽元素上設(shè)置skewX()，只會對偽元素進(jìn)行傾斜，并不會對父元素上的文字進(jìn)行傾斜。

　　2.設(shè)置z-index:-1。這里如果不設(shè)置z-index值為負(fù)值的話，就看不到在 li 元素里面的文字了，因?yàn)閍bsolute會提高自身元素的層級，所以要讓偽元素z-index為-1，讓其的層級位居 li 元素之后。

　　3.使用skewX()函數(shù)讓偽元素（不是 li 元素）元素旋轉(zhuǎn) 25度，注意寫上屬性前綴，防止瀏覽器兼容性問題。

　　4.將偽元素和偽類結(jié)合使用的時候，必須要注意的是先偽類，再偽元素。如果是li::after:hover 這樣設(shè)置的話是沒有任何效果的。正確的寫法：li:hover::after。

　　示例效果如下。

　　（hover狀態(tài)）

　　1.2：梯形導(dǎo)航條

　　梯形導(dǎo)航條的是實(shí)現(xiàn)思想：梯形導(dǎo)航條使用了CSS3 3D 變形中的三個屬性：perspective()，rotateX()和transform-origin。

　　perspective()是用于設(shè)置用戶和元素3D空間Z平面之間的距離，值越小，用戶與3D空間Z平面距離越近，視覺效果會明顯；反之，值越大，用戶與3D空間Z平面距離越遠(yuǎn)，視覺效果越小。

　　ratateX()是用于3D空間中x軸的旋轉(zhuǎn)，大家可以想象一下在高中時期學(xué)的空間直角坐標(biāo)系，跟那個x軸的旋轉(zhuǎn)是一樣的道理。

　　transform-origin是用于指定元素的旋轉(zhuǎn)中心點(diǎn)位置。

　　具體屬性的使用方法可以去查閱相關(guān)文檔，這里就不再贅述了。具體代碼實(shí)現(xiàn)如下：

　　梯形導(dǎo)航條HTML

<ul>

</ul>

　　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;

　　}

　　上面代碼中，只顯示重要部分。注意以下幾個問題：

　　1.前四個問題與平行四邊形導(dǎo)航條的制作思路基本相同。其中，在偽元素上設(shè)置perspective()和rotateX()，只會對偽元素進(jìn)行3D處理和在空間中X軸的旋轉(zhuǎn)，并不會對父元素上的文字進(jìn)行任何的處理。文字還是會按照默認(rèn)效果顯示。如果在父元素上設(shè)置perspective()和rotateX()，則會影響之后的所有子元素。也就是所有的子元素（包括文字）都會進(jìn)行旋轉(zhuǎn)。文字被旋轉(zhuǎn)了，閱讀十分困難的。這個邏輯應(yīng)該不難理解。

　　2.用于控制梯形是左傾斜還是右傾斜的屬性是transform-origin。梯形不傾斜：bottom。左傾斜：bottom left；右傾斜：bottom right。

　　示例效果如下：

　　2.毛玻璃效果

　　毛玻璃的實(shí)現(xiàn)思想：毛玻璃使用了CSS3中的backgroung-size，fiter濾鏡的原理。

　　background-size屬性用于指定背景圖片的尺寸，其中的一個參數(shù)cover是將背景圖片放大，以適合鋪滿整個容器。但是這個屬性使用的前提是需要設(shè)定一張足夠大尺寸的圖片，否則會導(dǎo)致背景圖片失真。

　　fiter濾鏡中的blur()用于將圖片進(jìn)行高斯模糊處理，只接受單位值，值越大，模糊效果越明顯。

　　在張鑫旭老師的一篇關(guān)于毛玻璃實(shí)現(xiàn)的文章中（會在參考文章中給出鏈接），給出了毛玻璃實(shí)現(xiàn)的效果，可是有一些小問題：如果在背景圖片上加上文字，blur()會將文字一起模糊掉，這樣的話會用戶體驗(yàn)不太好。當(dāng)然，在不需要文字的背景圖片下，張鑫旭老師的方案還是很棒的。

　　以下給出具體代碼：

　　毛玻璃HTML

　　My Name is Uncle-Keith！

　　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的方法，并且設(shè)置了TBLR和z-index。使用這種方法的關(guān)鍵之處在于我們是對偽元素進(jìn)行了blur()處理，這樣并不會影響到父元素中的文字效果。

　　2.需要給背景圖片添加background-size屬性，這個是為了讓圖片自適應(yīng)整個屏幕的寬度。另外，這個屬性需要添加兩次。一是在body元素上，一是在偽元素上。在偽元素上添加的原因是我們要讓blur()處理模糊的圖片與背景圖片相同。如果在偽元素中給background設(shè)置inherit的話，只會繼承父容器rascal的背景，而rascal容器是一個白色背景的容器，這樣就與我們的效果不相同了。下圖是在偽元素中使用background:inherit;的毛玻璃效果。

　　這并不是我們想要的毛玻璃效果。所以偽元素上background的設(shè)置應(yīng)該與背景圖片是相同的。

　　3.在為偽元素設(shè)置正確的background之后，我們要使用margin負(fù)值模糊邊緣消退的問題。

　　可以看到，毛玻璃中的blur()效果有點(diǎn)過猶不及了，一圈模糊效果超出了容器，給父元素設(shè)置overflow:hidden，可以將超出的部分剪切掉。最終的示例效果如下。

　　最終效果看起來就很自然了。

　　3.結(jié)束語

　　三個實(shí)例中，有一個共同的思想：將CSS3的傾斜，透視，旋轉(zhuǎn)和濾鏡效果都放在偽元素中，并且給父元素設(shè)置relative，偽元素設(shè)置absolute，讓偽元素的寬度和高度撐滿父元素的整個區(qū)域，最后設(shè)置偽元素的z-index為負(fù)值。這樣做的好處就是不會影響父容器中的文字。

　　具體的代碼如下：

　　.container {

　　position: relative;

　　}

　　.container::after {

　　content: '';

　　position: absolute;

　　left: 0;

　　right: 0;

　　bottom: 0;

　　top: 0;

　　z-index: -1;