网站制作z-index简单实现引导蒙层
在网站制作中,经常会用到引导蒙层,就是在某个局部位置高亮我们需要重点突出的内容,实现该效果有两个核心元素,一个是引导区域,也就是要重点突出的内容,另一个就是半透明的蒙层元素。
为了满足业务需求,会从不同角度,不同的方法来实现引导蒙层,今天成都创新互联给大家介绍一种最简单的,用z-index实现引导蒙层,具体思路如下:
新增一个div,设置为半透明区域,大小覆盖整个页面;
半透明蒙层区域z-index大于页面元素;
引导内容区域大于半透明蒙层区域z-index
页面元素都是有层级的,我们只需要把引导内容区域设置为最顶层的层级,在引导内容区域之下设置一个遮罩层,其他内容元素的z-index都地域这个遮罩层即可。下边给大家举一个例子:
修改一下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简单实现引导蒙层
当前路径:http://scjbc.cn/view/800.html