CSS幕布動畫是一種通過控制伸縮的遮罩層來實現元素顯示/隱藏的動畫效果。

.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
.show .mask {
opacity: 1;
pointer-events: auto;
}

以上代碼是實現CSS幕布動畫的基本樣式，通過設置一個具有百分百寬高的伸縮區域（mask），并設置近似全透明的背景色（rgba），實現視覺上的漸變效果。其中，transition表示鼠標滑動或其他事件觸發時的動畫時間，可以根據自己的需求進行修改。opacity和pointer-events則控制遮罩層的顯隱和觸發狀態。

當需要在某時刻將該元素隱藏或顯示時，可以通過以下代碼實現：

...

添加.show類名的作用是對整個容器進行控制，從而實現元素的顯示/隱藏。

總之，CSS幕布動畫是一種簡單又實用的動畫效果，可以有效地增強頁面體驗和視覺效果。大家可以結合自己的實際需求進行改進和擴展。