CSS底部信息彈出窗口是一種非常常見的頁面效果，能夠在頁面底部以彈出式的方式展示重要的信息或是提示，給用戶更好的使用體驗(yàn)。下面我們就來學(xué)習(xí)一下如何實(shí)現(xiàn)這樣的彈出窗口。

首先，我們需要在HTML中定義一個(gè)用于展示信息的div，同時(shí)添加一個(gè)用于觸發(fā)彈出事件的按鈕。如下所示：

<div class="footer-popup">
<p>這里是彈出窗口的內(nèi)容</p>
</div>
<button id="footer-popup-btn">點(diǎn)擊彈出</button>

接下來，我們給彈出窗口的div添加CSS樣式，使其不可見且固定在底部，并設(shè)置相關(guān)的動(dòng)畫效果：

.footer-popup {
visibility: hidden;
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #f5f5f5;
border-radius: 5px 5px 0 0;
padding: 10px;
color: #333;
z-index: 999;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease-in-out;
}
.footer-popup.show {
visibility: visible;
opacity: 1;
}

最后，我們?cè)贘S中添加點(diǎn)擊按鈕事件，使得當(dāng)用戶點(diǎn)擊按鈕時(shí)彈出窗口出現(xiàn)，當(dāng)用戶再次點(diǎn)擊時(shí)，彈出窗口消失。

var popupBtn = document.getElementById('footer-popup-btn');
var popupDiv = document.querySelector('.footer-popup');
popupBtn.addEventListener('click', function() {
popupDiv.classList.toggle('show');
});

這樣，我們就完成了CSS底部信息彈出窗口的實(shí)現(xiàn)。同時(shí)，我們可以根據(jù)自己的需要來修改樣式和動(dòng)畫效果，達(dá)到更好的展示效果。