mask-image无法实现真正的百叶窗效果，因其仅支持单个连续遮罩的统一变化，而百叶窗需10条竖条独立、错时动画；可行方案是用多个div模拟叶片，配合clip-path与transition-delay实现分块裁剪入场。
mask-image 本身无法实现真正的百叶窗切换过渡——它只能控制单个遮罩层的统一变化，而百叶窗效果依赖多个独立条纹的分时动画。强行用 mask-size + mask-position 模拟，最多做出“卷帘”或“扫光”，不是百叶窗。
为什么 mask-image 不适合百叶窗
百叶窗的核心是「离散、并行、错时」：10 条竖条，每条有自己的入场时机和延迟；而 mask-image 配合 mask-position 只能移动一个连续渐变遮罩（比如 linear-gradient(to right, #000 50%, transparent 50%)），整个遮罩平移一次，所有区域同步暴露。这不是叶片开合，是拉窗帘。
常见错误现象包括：
- 鼠标悬停后图片整体“从左滑入”，没有条纹逐条展开感
- 试图用多个
mask-image值叠加，但浏览器只取第一个生效（多值遮罩不支持独立动画） - 配合
@keyframes动画mask-position，结果仍是匀速横扫，缺乏节奏层次
真正可行的 CSS 百叶窗实现路径
必须放弃单遮罩思路，改用可独立控制的 DOM 元素分块。主流做法是：用多个 <div> 模拟叶片，每片设独立 background-position-x 和 transform 或 clip-path。
立即学习“前端免费学习笔记（深入）”；
关键实操点：
- HTML 中用 10–12 个同级
<div class="blade">，每个通过style="--i: 0"、--i: 1等传递索引 - CSS 中用
background-position-x: calc(var(--i) * -10%)错开背景图位置，确保拼接后完整显示目标图 - 入场动画用
clip-path: inset(0 100% 0 0)→inset(0 0 0 0)，配合transition-delay: calc(var(--i) * 0.08s) - 避免用
opacity，易出现半透明重叠导致颜色发灰；优先选裁剪类属性（clip-path或transform: scaleX(0)）
如果坚持用 mask-image，能做什么
它适合做「单向擦除类」过渡，比如左右/上下扫过、圆形揭示、噪点溶解（需配合 SVG 或 Canvas 输出 mask）。例如：
img {
-webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
mask-image: linear-gradient(to right, #000 50%, transparent 50%);
mask-size: 200% 100%;
mask-position: -100% 0;
transition: mask-position 0.6s ease;
}
img:hover {
mask-position: 0 0;
}这段代码实现的是「左→右一次性擦除」，视觉上接近百叶窗的某一条，但不是多条独立行为。真要逼近百叶窗节奏，得手写 10 个不同 mask-position 关键帧 + 不同 animation-delay，维护成本高且兼容性差（Safari 对多关键帧 mask 动画支持不稳定）。
最易被忽略的点是：百叶窗的「条纹数」和「延迟步长」必须匹配容器宽高比与动画总时长——12 条配 0.05s 间隔，总动效约 0.6s；若条数太多或延迟太小，人眼会感知为模糊拖影而非清晰叶片。动手前先在纸上画三帧，比直接敲代码更省时间。
