CSS中的遮罩效果是一種非常常見的視覺特效，它可以使頁面看起來更加美觀和有層次感。而其中最流行的一種遮罩效果就是從中心顯現(xiàn)。下面就讓我們來一起學習如何使用CSS實現(xiàn)這一效果吧！

.mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: all 0.5s ease-out;
transform-origin: center;
transform: scale(0);
}
.mask.show {
opacity: 1;
transform: scale(1);
}

以上就是實現(xiàn)從中心顯現(xiàn)的遮罩效果的CSS代碼。首先，我們需要定義一個遮罩的樣式，并設(shè)置它的位置為絕對定位，填滿整個頁面。然后，我們使用rgba來定義其背景顏色，并設(shè)置其透明度初始值為0。

隨后，我們使用CSS過渡效果，將遮罩的透明度和縮放值變化設(shè)置為0.5秒和緩慢，而transform-origin用來設(shè)置元素的變形基點。

最后，我們使用JavaScript在用戶點擊某一元素時觸發(fā)遮罩的顯示效果，添加.show類名來激活遮罩，并通過transform將其大小設(shè)置為1，透明度設(shè)置為1，從而實現(xiàn)從中心顯現(xiàn)的效果。