在網(wǎng)站開發(fā)中，遮罩層是一個(gè)常用的功能。遮罩層可以用于彈出框、模態(tài)框、輪播圖等場景中。在實(shí)現(xiàn)遮罩層的效果中，常用的方式是從上往下實(shí)現(xiàn)遮罩。但在特定場景下，從下往上的遮罩效果也是可以實(shí)現(xiàn)的。本文將介紹如何使用 CSS 實(shí)現(xiàn)從下往上的遮罩效果。

.mask {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
.mask.show {
transform: translateY(0);
}

首先，我們需要?jiǎng)?chuàng)建一個(gè)遮罩層容器，設(shè)置其寬高、背景色、定位等屬性。在本例中，我們將遮罩層容器的位置設(shè)置為固定定位，距離瀏覽器左邊和底部的距離分別為 0，寬度為 100%，高度為 100px，背景色為半透明黑色。另外，我們需要將容器的層疊順序設(shè)置為最高，以確保覆蓋在其他元素之上。

接下來，我們通過 CSS3 動(dòng)畫實(shí)現(xiàn)從下往上的遮罩效果。利用 CSS3 的 transform 屬性可以實(shí)現(xiàn)元素的平移、旋轉(zhuǎn)、縮放等效果。我們給遮罩層容器添加 transform 屬性，將其向下平移 100% 的距離，即完全隱藏在瀏覽器窗口下方。當(dāng)需要顯示遮罩層時(shí)，我們添加 show 類名，并將 transform 屬性的值修改為 translateY(0%)，即向上平移 0%，完全顯示在瀏覽器窗口中。