CSS底部彈出框動畫酷炫而實用，它可以在網站中添加交互元素，增加用戶的體驗感。下面我們來通過代碼演示這個效果。

/* 設置堆疊順序（z-index） */
#container {
position: relative;
z-index: 1;
}
/* 隱藏底部彈出框 */
#bottomBox {
position: fixed;
z-index: -1;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #232323;
opacity: 0;
transition: all 0.5s ease;
}
/* 顯示底部彈出框 */
#bottomBox.show {
z-index: 2;
height: 200px;
opacity: 0.9;
}
/* 觸發顯示底部彈出框 */
#button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#button:hover + #bottomBox {
z-index: 3;
height: 200px;
opacity: 0.9;
}

以上代碼中，我們將底部彈出框設置為fixed定位，位于頁面的最下方。通過更改其高度和透明度，實現動畫效果。我們設置按鈕和底部彈出框的關系是通過文檔對象模型的“相鄰同輩選擇器”實現。