在網(wǎng)站設(shè)計(jì)和運(yùn)營(yíng)中，彈窗公告是一種很常見(jiàn)的功能。它可以用來(lái)傳達(dá)網(wǎng)站的重要信息和活動(dòng)，吸引用戶關(guān)注和參與。本文將介紹一種使用CSS實(shí)現(xiàn)自動(dòng)彈窗公告的代碼，可供網(wǎng)站設(shè)計(jì)者參考。

// CSS代碼
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
z-index: 100;
display: none;
}
.popup.active {
display: block;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
display: none;
}
.overlay.active {
display: block;
}

以上是彈窗公告的CSS代碼，其中包括.popup和.overlay兩個(gè)CSS類。.popup是彈窗的樣式，包括了位置、大小、邊框和陰影等屬性，它的display屬性初始值為none，表示默認(rèn)情況下不顯示。.popup.active是彈窗顯示時(shí)的樣式，它的display屬性值為block，表示將彈窗設(shè)置為顯示狀態(tài)。

.overlay是彈窗的遮罩層，用于遮蔽頁(yè)面上方的內(nèi)容，其屬性與.popup類似。.overlay.active則是遮罩層顯示時(shí)的樣式，同樣將display屬性設(shè)置為block。

// JS代碼
$(document).ready(function() {
$('.popup').addClass('active');
$('.overlay').addClass('active');
$('.popup__close').click(function() {
$('.popup').removeClass('active');
$('.overlay').removeClass('active');
});
});

以上是彈窗公告的JavaScript代碼，它使用了jQuery庫(kù)來(lái)操作DOM元素。當(dāng)頁(yè)面加載完成后，我們使用addClass方法將.popup和.overlay類的active屬性添加上去，以便彈窗公告能夠在頁(yè)面加載時(shí)自動(dòng)彈出。同時(shí)，我們?cè)贘S代碼中綁定了一個(gè)關(guān)閉按鈕的click事件，當(dāng)用戶點(diǎn)擊關(guān)閉按鈕時(shí)，將.popup和.overlay的active屬性移除，這樣彈窗公告就會(huì)自動(dòng)隱藏。

以上就是自動(dòng)彈窗公告的CSS和JS代碼，它可以幫助我們快速實(shí)現(xiàn)一個(gè)自動(dòng)彈出、可關(guān)閉和帶有遮罩層的彈窗公告功能。相信它會(huì)對(duì)網(wǎng)站設(shè)計(jì)者和運(yùn)營(yíng)者的工作有所幫助。