CSS彈出層特效是網頁開發中常用的一種交互效果，通過在頁面中彈出一個層，可以實現比較流暢的用戶體驗。下面我們來看一下如何使用CSS實現一個彈出層特效：

/* 點擊按鈕彈出層 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
/* 彈出層內容 */
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
max-width: 500px;
z-index: 999;
display: none;
}
/* 遮罩層 */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
display: none;
}
/* 彈出層出現時，遮罩層和彈出層都顯示 */
.popup-active {
display: block;
}
/* 點擊遮罩層或關閉按鈕時，隱藏遮罩層和彈出層 */
.overlay-active,
.popup-close {
display: none;
}

以上CSS代碼中，我們定義了三個樣式類，分別是btn、popup和overlay。btn是彈出層觸發的按鈕樣式，popup是彈出層內容的樣式，overlay是遮罩層的樣式。

其中，popup和overlay的display屬性都設置為none，表示初始狀態下不可見。當需要顯示彈出層時，同時將popup和overlay的樣式類改為popup-active和overlay-active即可。

在HTML代碼中，我們需要添加一個觸發彈出層的按鈕和一個彈出層的HTML結構，其中包括標題欄、內容區和關閉按鈕。具體代碼如下：

<button class="btn" onclick="document.querySelector('.popup, .overlay').classList.add('popup-active')">點擊彈出層</button><div class="overlay" onclick="document.querySelector('.popup, .overlay').classList.remove('popup-active, overlay-active')"></div><div class="popup"><h3>彈出層標題</h3><p>彈出層內容</p><button class="popup-close" onclick="document.querySelector('.popup, .overlay').classList.remove('popup-active, overlay-active')">關閉</button></div>

在點擊按鈕時，通過JavaScript添加popup-active和overlay-active類來顯示彈出層。在點擊關閉按鈕或遮罩層時，通過JavaScript去掉這兩個類，以隱藏彈出層。

通過以上HTML和CSS代碼以及一些JS交互邏輯，我們就實現了一個簡單的CSS彈出層特效。