蒙层可用于自定义弹出框的阴影,以及数据加载等。
<div class="mask"></div>
// 蒙层
.mask {
background-color: rgba(0,0,0,.5);
position: fixed;
opacity: 0.8;
z-index: 999999;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
气泡可用于新手提示,以及注意事项提示等。
<div class="tooltip-box">重庆</div>
// 气泡箭头
.tooltip-box:before{
content: "";
position: absolute;
right: 100%;
top: 16px;
left: 20%;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 10px solid #ccc;
}
// 气泡泡
.tooltip-box:after{
content: "夜景";
position: absolute;
right: 100%;
top: 26px;
left: 14%;
width: 34px;
height: 16px;
border: 1px solid #fff;
border-radius: 4px;
}