首頁 > web前端 > css教學 > CSS3教學之製作傾斜導航條與毛玻璃效果

CSS3教學之製作傾斜導航條與毛玻璃效果

巴扎黑
發布: 2017-09-13 10:07:39
原創
1849 人瀏覽過

這篇文章主要介紹了使用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:梯形導覽結束.833533453字.文章

1.導航條

1.1:平行四邊形導航條平行四邊形製作的思想:平行四邊形的製作運用了CSS3 2D 變形中的skew()傾斜屬性,因為我們只是在水平方向上傾斜,所以使用skew()時需要將第二個參數指定為0,否則x,y軸方向都會發生傾斜,這並不是我們想要的效果。或是使用skewX()。具體的程式碼實現如下。 平行四邊形導航條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。

範例效果如下。

1.2:梯形導航條

梯形導航條的是實現思想:梯形導航條使用了CSS3 3D 變形中的三個屬性:perspective(),rotateX()和transform-origin。

perspective()是用來設定使用者和元素3D空間Z平面之間的距離,數值越小,使用者與3D空間Z平面距離越近,視覺效果會明顯;反之,數值越大,使用者與3D空間Z平面距離越遠,視覺效果越小。

ratateX()是用於3D空間中x軸的旋轉,大家可以想像一下在高中時期學的空間直角座標系,跟那個x軸的旋轉是一樣的道理。

transform-origin是用來指定元素的旋轉中心點位置。

具體屬性的使用方法可以去查閱相關文檔,這裡就不再贅述了。具體程式碼實作如下:

梯形導覽條HTML

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()会将文字一起模糊掉,这样的话会用户体验不太好。当然,在不需要文字的背景图片下,张鑫旭老师的方案还是很棒的。

以下给出具体代码:

毛玻璃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;
}
登入後複製

以上是CSS3教學之製作傾斜導航條與毛玻璃效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板