CSS3制作導航條和毛玻璃效果

CSS3制作導航條和毛玻璃效果

　　CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。用CSS3怎么制作導航條和毛玻璃效果？下面yjbys小編為大家分享通過CSS3來制作類似下面的導航條和毛玻璃效果教程吧！

　　導航條對于每一個Web前端攻城獅來說并不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應(yīng)的方法進行模糊處理。這種效果對用戶來說是十分具有視覺沖擊力的。

　　導航條是梯形形狀的。

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

　　把導航條和毛玻璃效果在一篇文章中分享其實是有原因的。因為這兩個效果的實現(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;

　　}

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

【CSS3制作導航條和毛玻璃效果】相關(guān)文章：

淺析CSS3的新功能和新特性08-24

室內(nèi)效果圖制作經(jīng)驗分享06-21

音樂及效果音在影視制作中的應(yīng)用09-18

3dmax客廳效果圖的制作08-13

詳解CSS3盒模型display:box08-24

快走和慢跑哪個健身效果更好03-11

會聲會影制作視頻手電照射效果06-06

慢跑和快走哪個減肥效果好05-17

3dmax結(jié)合VRAY制作展示廳效果08-20

flash怎么制作慢慢綻放的玫瑰花的動畫效果04-13