網(wǎng)站制作z-index簡(jiǎn)單實(shí)現(xiàn)引導(dǎo)蒙層
2013-04-27 分類： 網(wǎng)站制作
在網(wǎng)站制作中，經(jīng)常會(huì)用到引導(dǎo)蒙層，就是在某個(gè)局部位置高亮我們需要重點(diǎn)突出的內(nèi)容，實(shí)現(xiàn)該效果有兩個(gè)核心元素，一個(gè)是引導(dǎo)區(qū)域，也就是要重點(diǎn)突出的內(nèi)容，另一個(gè)就是半透明的蒙層元素。
為了滿足業(yè)務(wù)需求，會(huì)從不同角度，不同的方法來(lái)實(shí)現(xiàn)引導(dǎo)蒙層，今天成都創(chuàng)新互聯(lián)給大家介紹一種最簡(jiǎn)單的，用z-index實(shí)現(xiàn)引導(dǎo)蒙層，具體思路如下：
新增一個(gè)div，設(shè)置為半透明區(qū)域，大小覆蓋整個(gè)頁(yè)面；
半透明蒙層區(qū)域z-index大于頁(yè)面元素；
引導(dǎo)內(nèi)容區(qū)域大于半透明蒙層區(qū)域z-index
頁(yè)面元素都是有層級(jí)的，我們只需要把引導(dǎo)內(nèi)容區(qū)域設(shè)置為最頂層的層級(jí)，在引導(dǎo)內(nèi)容區(qū)域之下設(shè)置一個(gè)遮罩層，其他內(nèi)容元素的z-index都地域這個(gè)遮罩層即可。下邊給大家舉一個(gè)例子：
修改一下z2樣式：
.z2{
position:absolute;
left:50px;
top:50px;
width:50px;
height:50px;
background:black;
opacity:0.5;
z-index:2;
animation:z_index 2s linear infinite alternate;}
@keyframes z_index{
from{
left:50px;
top:50px;
width:50px;
height:50px;
}
to {
left:0px;
top:0px;
width:200px;
height:200px;
}}
只要在布局頁(yè)面元素的時(shí)候，把需要做蒙層的元素確定好，配合js，動(dòng)態(tài)的設(shè)置元素的z-index + opacity，就可以很好的做到頁(yè)面的引導(dǎo)蒙層效果。
標(biāo)題名稱：網(wǎng)站制作z-index簡(jiǎn)單實(shí)現(xiàn)引導(dǎo)蒙層
標(biāo)題鏈接：http://m.kartarina.com/news/800.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作等
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 淘寶搜索“你絕對(duì)不想知道的事”，以此來(lái)看商城網(wǎng)站制作思路 2013-04-26
- 從廈門(mén)導(dǎo)游威脅游客來(lái)看看旅游網(wǎng)站制作方案 2013-04-25
- 成都創(chuàng)新互聯(lián)網(wǎng)站制作公司教你一分鐘了解區(qū)塊鏈 2013-04-25
- 當(dāng)彩票遇上互聯(lián)網(wǎng)，彩票網(wǎng)站制作怎么做？ 2013-04-25
- 渠道為王的時(shí)代，家居行業(yè)網(wǎng)站制作方案 2013-04-25
- 網(wǎng)站制作完成后怎么選擇專業(yè)的網(wǎng)站維護(hù)公司 2013-04-25
- AI技術(shù)——人工智能科技公司網(wǎng)站制作方案 2013-04-24
- 網(wǎng)站制作robots協(xié)議應(yīng)該遵守么？ 2013-04-26
- 網(wǎng)站制作前端會(huì)被人工智能（AI）取代么？ 2013-04-26
- 成都創(chuàng)新互聯(lián)網(wǎng)站制作的3大套餐 2013-04-26
- 政府門(mén)戶網(wǎng)站制作，惠及百姓生活 2013-04-26
- 電商鋪天蓋地普及起來(lái)，物流行業(yè)網(wǎng)站制作怎么做？ 2013-04-24
- 2013網(wǎng)站制作UI設(shè)計(jì)呈現(xiàn)怎樣的趨勢(shì) 2013-04-24
- 幼兒園/早教中心網(wǎng)站制作方案 2013-04-24
- 能源化工/節(jié)能環(huán)保類企業(yè)網(wǎng)站制作方案 2013-04-24
- 這樣走心的網(wǎng)站制作，瞬間讓網(wǎng)頁(yè)“逼格”滿滿！ 2013-04-23
- 網(wǎng)站制作要知道的“三不要” 2013-04-23
- H5分銷商城網(wǎng)站制作流程 2013-04-23
- 企業(yè)網(wǎng)站制作涵蓋哪些基本功能？ 2013-04-22