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; /* 将遮罩层设为弹出框下一层 */ }
以上代码定义了一个固定定位的弹出框元素和一个背景遮罩层元素,同时增加了一个关闭按钮,使用户能够手动关闭弹出框,避免影响用户体验。