使用 css mask 制作炫酷转场过渡动画的核心在于利用 mask-image 结合 linear-gradient 或 radial-gradient 动态改变遮罩的透明度区域，配合 transition 实现平滑的显隐效果。具体做法是定义一个包含渐变背景的遮罩层，通过修改渐变的颜色停止点（color-stop）或位置参数来“擦除”或“显露”元素内容，从而实现类似聚光灯、滑动揭示或径向扩散的视觉特效。
如何实现线性滑动的遮罩转场？
线性滑动转场通常用于页面切换或模块展开，通过改变 linear-gradient 的位置参数来控制遮罩的可见边界。我们可以创建一个覆盖全屏的黑色遮罩层，其背景是一个从左到右的渐变，其中黑色代表完全遮挡，透明代表完全显示。当点击按钮时，通过 JavaScript 修改该渐变的起始位置，即可实现遮罩像百叶窗一样滑过屏幕的效果。
/* HTML结构示例 */
<div class="container">
<div class="content">这是被遮罩的内容</div>
<div class="mask" id="mask"></div>
<button id="toggleBtn">切换遮罩</button>
</div>
/* CSS 样式 */
.container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
background: #3498db;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 初始状态：完全遮挡，渐变从0%黑到100%黑 */
-webkit-mask-image: linear-gradient(to right, black 0%, black 0%, transparent 0%, transparent 100%);
mask-image: linear-gradient(to right, black 0%, black 0%, transparent 0%, transparent 100%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
transition: mask-image 0.5s ease-in-out;
}
/* 激活状态：遮罩向右滑动，露出下方内容 */
.mask.active {
/* 渐变变为：前50%黑，后50%透明 */
-webkit-mask-image: linear-gradient(to right, black 50%, black 50%, transparent 50%, transparent 100%);
mask-image: linear-gradient(to right, black 50%, black 50%, transparent 50%, transparent 100%);
}上述代码中，.mask 类使用了 mask-image 属性。初始状态下，渐变的所有色标都设置为黑色，意味着整个遮罩层是不透明的，完全覆盖了下方的 .content。当添加 .active 类时，我们将黑色的停止点移动到 50%，右侧变为透明。由于设置了 transition，浏览器会在这两个状态之间进行插值计算，产生平滑的滑动效果。这种方法比直接操作 opacity 或 clip-path 更灵活，因为可以创建复杂的渐变边缘。
立即学习“前端免费学习笔记（深入）”；
如何制作径向扩散的聚光灯效果？
径向扩散效果常用于聚焦注意力或模拟手电筒照明。这可以通过 radial-gradient 来实现，通过调整径向渐变的大小（radius）来控制“光圈”的扩张或收缩。与线性渐变不同，径向渐变是从中心点向外辐射，因此适合制作圆形的遮罩变化。
/* 径向遮罩示例 */
.spotlight-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 初始状态：小光圈，周围全黑 */
-webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 10%, black 100%);
mask-image: radial-gradient(circle at center, transparent 0%, black 10%, black 100%);
transition: mask-image 0.8s ease-out;
}
/* 展开状态：大光圈，几乎全透明 */
.spotlight-mask.expanded {
/* 光圈扩大到90%，周围仍保留少量黑色边框 */
-webkit-mask-image: radial-gradient(circle at center, transparent 0%, black 90%, black 100%);
mask-image: radial-gradient(circle at center, transparent 0%, black 90%, black 100%);
}在这个例子中，radial-gradient 的第一个色标是透明，第二个是黑色。初始状态下，透明区域为 0%，黑色从 10% 开始直到 100%，这意味着只有中心极小的部分是可见的（如果下方有内容的话），其余部分被黑色遮罩挡住。当应用 .expanded 类时，黑色区域扩展到 90%，使得大部分区域变得透明，从而“显露”出下方的内容。这种效果非常适合用于引导用户视线或制作神秘的揭示动画。
遮罩层在极端缩放下的表现如何？
当容器尺寸发生剧烈变化或遮罩参数设置不当（如渐变范围超出 0%-100%）时，遮罩行为可能不符合预期。例如，如果将 linear-gradient 的黑色停止点设置为负数或超过 100%，浏览器会将其钳制在边界内，导致遮罩无法完全隐藏或显示。此外，mask-image 不支持百分比以外的复杂单位混合，需确保所有色标单位一致。
在实际开发中，建议始终使用 0% 和 100% 作为渐变的基准范围，并通过中间值控制过渡。对于需要精确控制的场景，可以使用 JavaScript 动态计算渐变字符串，而不是依赖 CSS 类的静态切换。这样可以避免在不同视口下出现遮罩错位或边缘锯齿问题。同时，注意 -webkit-mask-* 前缀的兼容性，虽然现代浏览器已支持标准属性，但在 Safari 等 WebKit 内核浏览器中仍需保留前缀以确保稳定运行。
