- 相關(guān)推薦
CSS3制作導(dǎo)航條和毛玻璃效果
CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。用CSS3怎么制作導(dǎo)航條和毛玻璃效果？下面yjbys小編為大家分享通過(guò)CSS3來(lái)制作類(lèi)似下面的導(dǎo)航條和毛玻璃效果教程吧！
導(dǎo)航條對(duì)于每一個(gè)Web前端攻城獅來(lái)說(shuō)并不陌生，但是毛玻璃可能會(huì)相對(duì)陌生一些。簡(jiǎn)單的說(shuō)，毛玻璃其實(shí)就是讓圖片或者背景使用相應(yīng)的方法進(jìn)行模糊處理。這種效果對(duì)用戶來(lái)說(shuō)是十分具有視覺(jué)沖擊力的。
導(dǎo)航條是梯形形狀的。
背景區(qū)域的毛玻璃效果。
把導(dǎo)航條和毛玻璃效果在一篇文章中分享其實(shí)是有原因的。因?yàn)檫@兩個(gè)效果的實(shí)現(xiàn)離不開(kāi)一個(gè)重要的思想。
用語(yǔ)言來(lái)描述就是：父元素設(shè)置position:relative，其偽元素（after或者before）設(shè)置 position:absolute，并且讓top,bottom,left,right都為0，偽元素占滿父元素的整個(gè)空間，最后設(shè)置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í)戰(zhàn)例子中對(duì)這段代碼的意思一一道來(lái)。
【CSS3制作導(dǎo)航條和毛玻璃效果】相關(guān)文章：
淺析CSS3的新功能和新特性03-06
ps制作下雨效果的方法03-04
3D效果圖制作的制作步驟03-18
Fireworks制作炫光效果的教程03-04
flash怎么給圖片制作伸縮動(dòng)畫(huà)效果03-18
室內(nèi)效果圖制作經(jīng)驗(yàn)分享01-23
photoshop金屬光澤效果制作教程04-02
