彈出框是網站設計中常用的UI控件之一，它可以在用戶操作時，提供更好的交互體驗。其中，炫酷的彈出框設計可以讓網站更加時尚，吸引用戶的注意力。下面我們來看一下如何使用CSS樣式創建一個炫酷的彈出框。

.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 500px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
z-index: 9999;
padding: 20px;
text-align: center;
}
.popup h2 {
font-weight: bold;
font-size: 24px;
margin-bottom: 15px;
}
.popup p {
font-size: 18px;
line-height: 1.4;
}
.popup .btn-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
color: #666;
cursor: pointer;
}
.popup .btn-close:hover {
color: #000;
}
.popup .btn-confirm {
display: inline-block;
padding: 10px 30px;
background-color: #ff6600;
color: #fff;
text-transform: uppercase;
font-weight: bold;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.popup .btn-confirm:hover {
background-color: #fff;
color: #ff6600;
}

代碼中使用了一個類名為popup的樣式，它包含了彈出框的位置、大小、背景顏色、圓角等基本樣式，h2用于設置標題樣式，p用于設置彈出框內容樣式。同時，樣式中也包含了關閉按鈕和確認按鈕的樣式，通過:hover偽類實現了按鈕的顏色變化。

通過上述樣式設計，可以創建出一個華麗的彈出框，不僅可以優化用戶體驗，還可以為網站增加時尚的元素，提升網站形象。