CSS3 彈窗特效 CSS3 是一個強大的前端技術，它可以幫助我們實現許多優美的特效。其中，彈窗特效是最常用的一個特效。在這篇文章中，我們將探討如何用 CSS3 實現彈窗特效。 首先，我們需要一個 HTML 代碼，用于顯示彈窗的內容。我們可以使用一個 div 標簽，里面包含一些文本和按鈕等元素。例如：

這是一個彈窗！
你確定要刪除這個條目嗎？
確定取消

然后，我們需要使用 CSS3 來控制彈窗的樣式和行為。我們可以使用偽類來實現當用戶點擊某個按鈕時，彈窗彈出的效果。例如：

.pop-up {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
box-shadow: 0px 0px 10px #cccccc;
display: none;
}
.pop-up.show {
display: block;
}
.pop-up button {
margin-right: 10px;
}

在上面的代碼中，我們使用了 .pop-up 類來定義彈窗的樣式。我們設置了它的位置、背景顏色、邊框、邊框圓角和陰影效果等。我們還使用了 display 屬性來控制彈窗是否顯示。當我們想顯示彈窗時，我們只需要添加一個 .show 類即可。 最后，我們需要添加一些 JavaScript 代碼，用于控制彈窗的顯示和隱藏。例如：

var popUp = document.querySelector('.pop-up');
var btns = document.querySelectorAll('.pop-up button');
for(var i = 0; i< btns.length; i++) {
btns[i].addEventListener('click', function(e) {
e.preventDefault();
if(this.textContent === '確定') {
popUp.classList.remove('show');
// TODO: 處理確定按鈕被點擊的情況
} else if(this.textContent === '取消') {
popUp.classList.remove('show');
// TODO: 處理取消按鈕被點擊的情況
}
});
}
// 顯示彈窗
function showPopUp() {
popUp.classList.add('show');
}
// 隱藏彈窗
function hidePopUp() {
popUp.classList.remove('show');
}
// 調用 showPopUp() 函數來顯示彈窗
showPopUp();
// 調用 hidePopUp() 函數來隱藏彈窗
hidePopUp();

在上面的代碼中，我們使用了 document.querySelector() 方法和 document.querySelectorAll() 方法來選擇元素。我們還使用了 addEventListener() 方法來添加事件監聽器，以便我們可以在用戶點擊某個按鈕時執行相應的操作。我們還創建了兩個函數 showPopUp() 和 hidePopUp()，用于控制彈窗的顯示和隱藏。 綜上所述，我們可以使用 HTML、CSS3 和 JavaScript 來實現彈窗特效。這個特效可以讓我們更加方便地與用戶交互，提高用戶的體驗。