在網站設計和運營中，彈窗公告是一種很常見的功能。它可以用來傳達網站的重要信息和活動，吸引用戶關注和參與。本文將介紹一種使用CSS實現自動彈窗公告的代碼，可供網站設計者參考。

// 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兩個CSS類。.popup是彈窗的樣式，包括了位置、大小、邊框和陰影等屬性，它的display屬性初始值為none，表示默認情況下不顯示。.popup.active是彈窗顯示時的樣式，它的display屬性值為block，表示將彈窗設置為顯示狀態。

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

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

以上是彈窗公告的JavaScript代碼，它使用了jQuery庫來操作DOM元素。當頁面加載完成后，我們使用addClass方法將.popup和.overlay類的active屬性添加上去，以便彈窗公告能夠在頁面加載時自動彈出。同時，我們在JS代碼中綁定了一個關閉按鈕的click事件，當用戶點擊關閉按鈕時，將.popup和.overlay的active屬性移除，這樣彈窗公告就會自動隱藏。

以上就是自動彈窗公告的CSS和JS代碼，它可以幫助我們快速實現一個自動彈出、可關閉和帶有遮罩層的彈窗公告功能。相信它會對網站設計者和運營者的工作有所幫助。