2013-04-27 分类: 网站制作
在网站制作中,经常会用到引导蒙层,就是在某个局部位置高亮我们需要重点突出的内容,实现该效果有两个核心元素,一个是引导区域,也就是要重点突出的内容,另一个就是半透明的蒙层元素。
为了满足业务需求,会从不同角度,不同的方法来实现引导蒙层,今天成都创新互联给大家介绍一种最简单的,用z-index实现引导蒙层,具体思路如下:
新增一个div,设置为半透明区域,大小覆盖整个页面;
半透明蒙层区域z-index大于页面元素;
引导内容区域大于半透明蒙层区域z-index
页面元素都是有层级的,我们只需要把引导内容区域设置为最顶层的层级,在引导内容区域之下设置一个遮罩层,其他内容元素的z-index都地域这个遮罩层即可。下边给大家举一个例子:
<!DOCTYPE html>
<html>
<head>
<style>
.z1{
position:static;
left:50px;
top:50px;
width:50px;
height:50px;
background:blue;
z-index:1;}
.z2{
position:static;
left:60px;
top:60px;
width:50px;
height:50px;
background:red;
z-index:2;}
.z3{
position:static;
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:static;
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网址:/news0/800.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站制作等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容