本文详解如何通过 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"> @@##@@ </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 增添专业级视觉表现力。
