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

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

<div class="footer-popup">
<p>這里是彈出窗口的內容</p>
</div>
<button id="footer-popup-btn">點擊彈出</button>

接下來，我們給彈出窗口的div添加CSS樣式，使其不可見且固定在底部，并設置相關的動畫效果：

.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;
}

最后，我們在JS中添加點擊按鈕事件，使得當用戶點擊按鈕時彈出窗口出現，當用戶再次點擊時，彈出窗口消失。

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

這樣，我們就完成了CSS底部信息彈出窗口的實現。同時，我們可以根據自己的需要來修改樣式和動畫效果，達到更好的展示效果。