CSS代碼網(wǎng)頁彈窗廣告是互聯(lián)網(wǎng)上常見的一種廣告形式，它可以在用戶打開網(wǎng)站時以彈窗的方式呈現(xiàn)在頁面上。下面我們一起來看一下實現(xiàn)這一效果的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; /* 將遮罩層設為彈出框下一層 */
}

以上代碼定義了一個固定定位的彈出框元素和一個背景遮罩層元素，同時增加了一個關閉按鈕，使用戶能夠手動關閉彈出框，避免影響用戶體驗。