本文详解如何通过 CSS mask-image 与 mask-size 配合 mask-position 动画，实现一个可垂直滑动、带柔化过渡的透明条带遮罩效果，使前景元素局部“穿透”显示背景内容。
本文详解如何通过 css `mask-image` 与 `mask-size` 配合 `mask-position` 动画，实现一个可垂直滑动、带柔化过渡的透明条带遮罩效果，使前景元素局部“穿透”显示背景内容。
在现代 Web 开发中，利用 CSS 遮罩（mask）创建动态视觉效果是一种高效且性能友好的方案。本文聚焦一个典型需求：让一个全尺寸遮罩层中包含一条可平滑移动的透明带（band），从而在前景图像上“划开”一条窗口，露出下方背景内容——例如数字“2”上滑过一条透明条，短暂显现其后的数字“1”。
关键在于理解：遮罩本身可以超出被遮罩元素的尺寸，只要通过 mask-size 扩大遮罩画布，并用 mask-position 控制其可视区域即可实现“溢出式”位移动画。这避免了因 mask-repeat: no-repeat 导致的上下大面积失真问题。
✅ 正确实现原理
- 使用 mask-image: linear-gradient() 构建三段式遮罩：顶部不透明区 → 中间渐变透明带 → 底部不透明区；
- 将 mask-size 设为 100% 200%（宽度铺满，高度设为容器的 2 倍），为 mask-position 提供足够的位移空间；
- 利用 mask-position: 0% Y% 在 Y 轴上平移遮罩，配合 @keyframes 实现流畅滚动；
- 必须添加标准属性前缀（非仅 -webkit-），确保 Chrome、Firefox、Safari 全面兼容。
? 完整可运行代码示例
body {
background: black;
}
.wrapper {
height: 500px;
width: 500px;
background: white;
border: 1px solid black;
background-image: url("https://cdn.pixabay.com/photo/2015/04/04/19/13/one-706897_1280.jpg");
background-size: contain;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}
.mask {
height: 100%;
width: 100%;
border: 1px solid red;
/* 核心：扩大遮罩画布 + 精确控制透明带 */
mask-image: linear-gradient(
to bottom,
black 0%,
black 40%,
transparent 45% 55%,
black 60%,
black 100%
);
mask-repeat: no-repeat;
mask-size: 100% 200%; /* 关键：高度设为200%，提供位移余量 */
mask-position: 0% 100%; /* 初始位置：遮罩底部对齐容器底部 */
/* 动画：从底部滑至顶部 */
animation: move 20s linear infinite;
}
@keyframes move {
0% {
mask-position: 0% 100%;
}
100% {
mask-position: 0% 0%;
}
}
.content {
height: 100%;
width: 100%;
}<div class="wrapper">
<div class="mask">
<div class="content">
<img src="https://media.gettyimages.com/id/182803848/photo/illustration-of-a-blue-number-2-in-3d.jpg?s=612x612&w=gi&k=20&c=GZvcBjuWwhLKFxhTUJX5lN4axZwXugVSTaJ_QPE0BA0=" / alt="如何用 CSS 创建可移动的全尺寸遮罩效果" >
</div>
</div>
</div>⚠️ 注意事项与优化建议
- 兼容性处理：务必同时声明标准属性（mask-image, mask-size, mask-position）与 -webkit-mask-* 前缀，尤其 Safari 仍需 -webkit- 支持；
- 透明带柔化技巧：如需更自然的过渡效果，可在 transparent 区域两侧添加 black 40%, black 45% 和 black 55%, black 60% 等硬边控制点，或改用 rgba(0,0,0,0.1) 等半透色增强融合感；
- 性能提示：mask 属于合成层操作，动画性能优异；但避免在大量元素上同时启用复杂遮罩动画，可结合 will-change: mask-position 进一步优化；
- 替代方案参考：若需支持 IE 或极老浏览器，可用 clip-path + background-blend-mode 模拟，但灵活性与性能不及原生 mask。
掌握这一模式后，你不仅能实现“扫描线”、“探照灯”、“水波穿透”等高级动效，还可将其拓展至水平滑动、径向扩散、甚至结合 scroll-driven animations 实现视差遮罩，为 UI 增添专业级视觉表现力。
