CSS底部淡入淡出是一種非常流行的網(wǎng)頁(yè)設(shè)計(jì)效果，通常用于彈窗等功能。本文將通過 pre 標(biāo)簽展示實(shí)現(xiàn)方法。

.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #ffffff;
opacity: 0;
transition: opacity 0.5s ease;
}
.footer.show {
opacity: 1;
}

上述代碼中，我們定義了一個(gè)名為 .footer 的樣式，它使用了 fixed 定位，將底部固定在頁(yè)面中。同時(shí)，我們也定義了它的寬度、高度、背景顏色和透明度。然后使用 transition 屬性定義了動(dòng)畫效果，這里使用 opacity 和 ease 作為參數(shù)。這樣，我們就完成了底部淡入淡出的設(shè)計(jì)。

為了使用這個(gè)效果，我們需要在 JavaScript 中通過添加類名 .show 來實(shí)現(xiàn)動(dòng)畫效果。下面是示例代碼：

var footer = document.querySelector('.footer');
footer.classList.add('show');

如上代碼，在獲取到 .footer 的元素后，我們可以通過 add 方法為它添加 show 類名，從而實(shí)現(xiàn)淡入淡出的效果。

以上就是本文的CSS底部淡入淡出介紹，希望對(duì)大家有所幫助。