CSS滑動遮罩的實現方法有很多，其中一種常見的方式是利用position屬性和transform屬性來實現滑動效果。

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.mask.active {
transform: translateY(0);
}

以上代碼中，我們首先定義了一個名為.mask的CSS類，這個類設置了遮罩層的樣式，包括fixed定位、背景色和初始位置。我們利用transform屬性將其移到屏幕之外，即設置為translateY(-100%)。

接著我們定義了一個.active的CSS類，這個類是給滑動遮罩添加的一個激活狀態。這個狀態下，我們將利用transform屬性將遮罩層移回屏幕內，即translateY(0)。

最后，我們可以利用JavaScript來控制滑動遮罩的激活狀態。比如，我們可以在按鈕的點擊事件中添加以下代碼來觸發滑動遮罩的出現：

document.querySelector('.mask').classList.add('active');

以上就是一個簡單的CSS滑動遮罩的實現方法。通過合理利用position和transform屬性，我們可以輕松地實現滑動效果，讓用戶在使用網站時有更好的感受體驗。