如何实现一个具有层次感的 CSS 遮罩效果与动画

在网页设计和开发中，CSS 遮罩效果是一种常见的技术，用于在元素上创建一层半透明的覆盖层，从而实现各种视觉效果，例如模态框、图片展示和背景特效等。本文将介绍如何编写一个具有层次感的 CSS 遮罩效果和动画，并提供相应的源代码示例。

首先，我们需要创建一个 HTML 结构，其中包含一个需要添加遮罩效果的元素。例如，我们创建一个简单的 <div> 元素，并为其添加一个 class 属性，用于选择器定位。以下是一个示例 HTML 结构：

<div class="container">
  <!-- 需要添加遮罩效果的内容 -->