CSS樣式是網頁設計中非常重要的一部分，它可以實現豐富多彩的動畫效果。其中，遮罩動畫可以讓網頁呈現出更加立體感和層次感，讓用戶有更好的瀏覽體驗。

<div class="mask">
<div class="content">
<p>這是一段被遮罩的文字內容</p>
</div>
</div>
<style>
.mask {
position: relative;
}
.mask::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
animation: mask 2s ease-in-out;
}
@keyframes mask {
0% {
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
}
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.content p {
font-size: 24px;
color: #fff;
text-align: center;
}
</style>

以上是一個簡單的遮罩動畫的代碼實現，基本思路就是在遮罩層上使用CSS的animation屬性創建動畫效果。通過調整animation中的keyframes關鍵幀，可以實現不同的動畫效果，使網頁更加生動有趣。