Smashing Animations Part 2: How CSS Masking Can Add An Extra Dimension

什么是遮罩？

一个简单的遮罩示例出现在《Disguise and Gals》和无数其他卡通片的结尾。在这里，一个动画渐晕逐渐隐藏了Yogi的更多面部特征。遮罩后面的内容并没有被擦除，只是被隐藏了。

在CSS中，遮罩使用位图、矢量或渐变遮罩图像来控制可见性。当遮罩的填充像素覆盖元素时，其内容将可见。当它们透明时，内容将被隐藏，这很合理。填充像素可以是任何颜色，但我总是使用亮粉色，这样我就能清楚地知道哪些区域会可见。

clip-path的功能类似于遮罩，但使用路径创建硬边裁剪区域。如果你想要挑剔一点，遮罩和裁剪路径在技术上是不同的，但它们的使用目标通常是相同的。因此，在本文中，我将它们视为同一个洞穴的两个入口，并将使用其中任何一种称为"遮罩"。

使用裁剪路径进行遮罩

在Mike的传记页面中，他的角色也进入了一个洞穴。我创建的SVG插图包含两个组，一个用于背景，另一个用于前景中的猩猩：

1
2
3
4
5
6

<figure>
  <svg viewBox="0 0 1400 960" id="cave">
    <g class="background">…</g>
    <g class="foreground">…</g>
  </svg>
</figure>

我定义了一个关键帧动画，通过改变其平移值将角色从右侧2000px移动到帧中心的自然位置：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

@keyframes foreground {
  0% { 
    opacity: .75; 
    translate: 2000px 0;
  }
  60% { 
    opacity: 1;
    translate: 0 0;
  }
  80% {
    opacity: 1; 
    translate: 50px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

然后将该动画应用到前景组：

1
2
3
4

.foreground {
  opacity: 0;
  animation: foreground 5s 2s ease-in-out infinite;
}

裁剪不规则形状

我经常需要更改或修改插图——可能是通过叠加颜色或应用混合模式——但我想保留它们的整体形状。

虽然clip-path会给我想要的结果，但这些路径的复杂性和大小有时会对性能产生负面影响。这就是我选择CSS遮罩的时候，因为它的属性自2023年以来已经成为基线并且高度可用。

mask属性是一个简写，可以包括mask-clip、mask-mode、mask-origin、mask-position、mask-repeat、mask-size和mask-type的值。我发现最好单独学习这些属性，以更容易掌握遮罩的概念。

遮罩使用位图、矢量或渐变遮罩图像控制可见性。同样，当遮罩的填充像素覆盖元素时，其内容将可见。当它们透明时，内容将被隐藏。当遮罩的部分区域是半透明时，部分内容将显示出来。我可以使用包含alpha通道的位图格式，如PNG或WebP：

1

mask-image: url(mask.webp);

我可以使用矢量图形应用遮罩：

1

mask-image: url(mask.svg);

或者使用锥形、线性或径向渐变生成图像：

1

mask-image: linear-gradient(#000, transparent);

或者：

1

mask-image: radial-gradient(circle, #ff104c 0%, transparent 100%);

我可能对元素应用多个遮罩，并使用应该熟悉的语法混合几种图像类型：

1
2
3

mask-image:
  image(url(mask.webp)),
  linear-gradient(#000, transparent);

使用遮罩图像

Mike的常见问题页面包括他的英雄站在十字路口的动画插图。我的目标是将形状与其内容分开，允许我在英雄的旅程中更改插图。因此，我创建了一个可缩放的mask-image来定义可见区域，并将其应用于figure元素：

1
2
3

figure {
  mask-image: url(mask.svg);
}

为了确保遮罩与插图的尺寸匹配，我还将mask-size设置为始终覆盖其内容：

1
2
3

figure {
  mask-size: cover;
}

分层多个遮罩

照明在Mike Worth的评论页面上尤其重要，他的猩猩英雄需要它来研究他的藏宝图。像背景图像一样，我可以应用多个遮罩图像来创建我需要的照明效果。

我可以组合两个遮罩图像：一个圆形、半透明的径向渐变用于提供氛围，再加上一个45度角的线性渐变用于光线。我将它们都应用到figure元素：

1
2
3
4
5
6

figure {
  mask-image:
  radial-gradient(circle, rgba(255,16,76,.5) 45%, transparent 55%),
  linear-gradient(45deg, transparent 40%, #ff104c 50%, #ff104c 50%, transparent 60%);
  mask-repeat: no-repeat;
}

我分别定位遮罩，将径向渐变大小设置为80%，线性渐变光线覆盖整个图像：

1
2
3
4

figure {
  mask-position: 50% 50%, 0 0;
  mask-size: 80%, cover;
}

动画遮罩

动画CSS遮罩可以创建令人兴奋的揭示和场景之间的过渡，并帮助用户关注关键内容。它还可以让故事栩栩如生，使个人体验更加引人入胜和沉浸式。

在我为他的网站设计的删除场景中，可以看到我为Mike Worth创建的猩猩冒险吉祥物驾车穿越景观。为了帮助讲述他被他的宿敌从远处监视的故事，我想添加一个双筒望远镜形状的遮罩。

我首先创建了双筒望远镜形状，包括一些取景器标记。

然后将该图像应用为遮罩，设置其位置、重复和大小值以将其放置在figure元素的中心：

1
2
3
4
5
6

figure {
  mask-image: url(mask.svg);
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  mask-size: 85%;
}

更多遮罩动画

当使用Mike Worth网站的人走错路或转错弯时，他最终会沉入热熔岩中。

为了让某人知道他们可能已经到达冒险的终点，我想模仿本文开头的缩放效果：

1
2
3

<figure>
  <svg>…</svg>
</figure>

我创建了一个圆形clip-path并将其默认大小设置为75%。然后，我定义了动画关键帧，将圆从75%调整到15%，然后将其附加到我的figure上，持续时间为1秒，延迟为3秒：

1
2
3
4
5
6
7
8
9

@keyframes error {
  0% { clip-path: circle(75%); }
  100% { clip-path: circle(15%); }
}

figure {
  clip-path: circle(75%);
  animation: error 1s 3s ease-in forwards;
}

将所有内容变为现实

遮罩为网页动画增添了额外的维度，使故事更加引人入胜，用户体验更加引人注目——同时保持动画高效轻量。无论你是要揭示内容、引导焦点还是为设计添加更多深度，遮罩都提供了无尽的创意可能性。那么为什么不在你的下一个项目中尝试它们呢？你可能会发现一种全新的方式来让你的动画栩栩如生。

结束。或者还没有？…

Mike Worth的网站将于2025年6月启动，但你现在可以在CodePen上看到本文的示例。