CSS3動態彈窗是一種非常常見的網頁特效，可以用來擴充網頁的交互性。下面我們來講一下如何使用CSS3實現動態彈窗。

/* 彈窗的樣式 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease-in-out;
}
/* 彈窗出現時的動畫 */
.popup.active {
opacity: 1;
pointer-events: auto;
}
/* 背景遮罩層的樣式 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: all 0.5s ease-in-out;
}
/* 背景遮罩層出現時的動畫 */
.overlay.active {
opacity: 1;
pointer-events: auto;
}

下面是HTML代碼：

彈出層
標題
內容
關閉

最后是JavaScript代碼：

// 獲取彈窗和背景遮罩層
var popup = document.getElementById('popup');
var overlay = document.getElementById('overlay');
// 切換彈窗和背景遮罩層的active類
function togglePopup() {
popup.classList.toggle('active');
overlay.classList.toggle('active');
}

通過CSS3動態彈窗，可以讓網頁變得更加美觀、實用和靈活，提高用戶的使用體驗。