淘先锋技术网

首页 1 2 3 4 5 6 7

CSS代码网页弹窗广告是互联网上常见的一种广告形式,它可以在用户打开网站时以弹窗的方式呈现在页面上。下面我们一起来看一下实现这一效果的CSS代码。

/* 首先定义一个弹出框的div元素 */
#popup {
position: fixed; /* 设置为固定定位,不会随着页面滚动而改变位置 */
top: 50%; /* 使弹出框垂直居中 */
left: 50%; /* 使弹出框水平居中 */
transform: translate(-50%, -50%); /* 通过偏移值将弹出框完全居中 */
background-color: #FFF; /* 设置背景颜色为白色 */
padding: 20px; /* 设定内边距 */
box-shadow: 0px 0px 10px rgba(0,0,0,0.4); /* 为弹出框添加阴影效果 */
z-index: 999; /* 将弹出框设置为最高层级 */
}
/* 定义关闭按钮样式 */
.close {
position: absolute; /* 绝对定位 */
top: 10px;
right: 10px;
font-size: 20px;
color: #000;
cursor: pointer; /* 将鼠标光标设为手型 */
}
/* 点击关闭按钮,隐藏弹出框 */
.close:hover {
color: #F00; /* 鼠标悬停时改变按钮颜色 */
}
/* 弹出框的背景遮罩层 */
#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6); /* 背景颜色设为半透明黑色 */
z-index: 998; /* 将遮罩层设为弹出框下一层 */
}

以上代码定义了一个固定定位的弹出框元素和一个背景遮罩层元素,同时增加了一个关闭按钮,使用户能够手动关闭弹出框,避免影响用户体验。