网站制作z-index简单实现引导蒙层

2013-04-27    分类: 网站制作

网站制作中,经常会用到引导蒙层,就是在某个局部位置高亮我们需要重点突出的内容,实现该效果有两个核心元素,一个是引导区域,也就是要重点突出的内容,另一个就是半透明的蒙层元素。

为了满足业务需求,会从不同角度,不同的方法来实现引导蒙层,今天成都创新互联给大家介绍一种最简单的,用z-index实现引导蒙层,具体思路如下:

新增一个div,设置为半透明区域,大小覆盖整个页面;

半透明蒙层区域z-index大于页面元素;

引导内容区域大于半透明蒙层区域z-index

页面元素都是有层级的,我们只需要把引导内容区域设置为最顶层的层级,在引导内容区域之下设置一个遮罩层,其他内容元素的z-index都地域这个遮罩层即可。下边给大家举一个例子:

<!DOCTYPE html>

<html>

<head>

<style>

.z1{

position:absolute;

left:50px;

top:50px;

width:50px;

height:50px;

background:blue;

z-index:1;}

.z2{

position:absolute;

left:60px;

top:60px;

width:50px;

height:50px;

background:red;

z-index:2;}

.z3{

position:absolute;

left:70px;

top:70px;

width:50px;

height:50px;

background:yellow;

z-index:3;}

</style>

</head>

<body>

<div class="z1">

<div class="z2">

<div class="z3">

</body>

</html>

修改一下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;

}}

只要在布局页面元素的时候,把需要做蒙层的元素确定好,配合js,动态的设置元素的z-index + opacity,就可以很好的做到页面的引导蒙层效果。

本文题目:网站制作z-index简单实现引导蒙层
URL网址:https://www.cdcxhl.com/news0/800.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站制作