CSS Mask 场景演示

mask-image: linear-gradient(to right, black 60%, transparent 100%)

这是一段很长的文本内容，超出容器宽度后会被渐变遮罩平滑淡出...

右侧渐变淡出（最常用）

两端渐变，中间显示核心内容区域

两端同时淡出

/* 核心 mask 属性 */
mask-image: linear-gradient(to right, black 60%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
    

2️⃣ 图片渐变叠加

mask-image: linear-gradient(to top, black 30%, transparent 100%)

渐隐的山峰

边缘模糊渐隐

/* 核心 mask 属性 */
mask-image: linear-gradient(to top, black 30%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, black 30%, transparent 100%);
    

3️⃣ SVG复杂形状遮罩

mask-image: url(SVG的五角星路径)

五角星形状裁剪

圆形裁剪

/* 核心 mask 属性 */
mask-image: url('star.svg');   /* 任意SVG路径 */
mask-mode: luminance;          /* 或 alpha */
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url('star.svg');
-webkit-mask-size: contain;
    

4️⃣ 进度条/Loading 动画

mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%)

扫光动画 — 两端透明遮罩露出中间进度条区域

/* 核心 mask 属性 */
mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    

5️⃣ 毛发/不规则边缘

mask-image: radial-gradient(circle at 50% 40%, transparent 25%, black 50%)

径向渐变模拟不规则边缘遮罩

配合真实毛发PNG遮罩可实现更精细的边缘处理

/* 核心 mask 属性 */
mask-image: radial-gradient(circle at 50% 40%, transparent 25%, black 50%);
-webkit-mask-image: radial-gradient(circle at 50% 40%, transparent 25%, black 50%);
    

6️⃣ 交互反馈 — 扫光效果

mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent)

/* 核心 mask 属性 */
mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 40%, black 60%, transparent);
/* 配合 hover + animation 实现扫光 */
    

7️⃣ 文字外发光

mask-image: radial-gradient(circle at center, black 20%, transparent 60%)

GLOW

光晕效果

/* 核心 mask 属性 — 伪元素实现 */
mask-image: radial-gradient(circle at center, black 20%, transparent 60%);
-webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 60%);
    

🔗 额外: 多层 Mask 组合

多层渐变 + mask-composite: intersect

多层渐变遮罩叠加

mask-composite: intersect 取交集，可实现复杂渐变效果

/* 核心 mask 属性 — 多层组合 */
mask:
  linear-gradient(to bottom, black 50%, transparent 100%),
  radial-gradient(circle at 30% 30%, black 30%, transparent 50%);
mask-composite: intersect;
-webkit-mask-composite: source-in;
    

🎭 CSS Mask 场景演示