- 相關推薦
CSS3制作導航條和毛玻璃效果
CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。用CSS3怎么制作導航條和毛玻璃效果？下面yjbys小編為大家分享通過CSS3來制作類似下面的導航條和毛玻璃效果教程吧！
導航條對于每一個Web前端攻城獅來說并不陌生，但是毛玻璃可能會相對陌生一些。簡單的說，毛玻璃其實就是讓圖片或者背景使用相應的方法進行模糊處理。這種效果對用戶來說是十分具有視覺沖擊力的。
導航條是梯形形狀的。
背景區域的毛玻璃效果。
把導航條和毛玻璃效果在一篇文章中分享其實是有原因的。因為這兩個效果的實現離不開一個重要的思想。
用語言來描述就是：父元素設置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;
}
什么意思呢？稍安勿躁，我會在接下來的兩個實戰例子中對這段代碼的意思一一道來。
【CSS3制作導航條和毛玻璃效果】相關文章：
淺析CSS3的新功能和新特性03-06
ps制作下雨效果的方法03-04
3D效果圖制作流程和注意事項03-18
3D效果圖制作的制作步驟03-18
Fireworks制作炫光效果的教程03-04
flash怎么給圖片制作伸縮動畫效果03-18
室內效果圖制作經驗分享01-23
photoshop金屬光澤效果制作教程04-02
影視制作中音樂及效果音的應用03-28