10 个惊人的 CSS、SVG 和 Canvas 蒙版示例

您可以使用 SVG 蒙版做一些令人惊奇的事情。 这种技术已经存在多年，但直到最近才进入主流 Web 开发。

我在网上搜索了以下自定义剪贴蒙版和 SVG/画布蒙版的演示。 这些示例展示了您可以在 Web 上将遮罩推到多远，以及最终它们可以为开发人员提供什么。

1.文本屏蔽

有关文本屏蔽的简洁示例，请查看上面的笔。 它使用 HTML 中的实际页面文本，因此您可以轻松更改此文本以阅读您想要的任何内容。

所有的魔法都发生在具有背景剪辑等属性的 CSS 中。 您可以将这些应用于任何页面上的几乎任何文本，但除非您有清晰的背景，否则它们不会显示。

缩放效果也是纯粹在 CSS 中创建的，这使得这个代码片段更加令人印象深刻。

2. 抠图蒙版多边形

请注意，这支笔确实使用 JavaScript 来制作复杂的动画，但所有的遮罩都是通过画布元素处理的。 这是一个令人惊讶的复杂想法，因此尝试遵循代码将很困难。

但是上面的多边形遮罩效果是我见过的比较独特的设计之一。 它采用 CSS 设计的形状，并使用 JavaScript 将这些形状创建为页面元素以遮盖背景图像。

这会运行一致的动画并在 JS 驱动的 Canvas 元素上运行，该元素的行为类似于 SVG/XML 内容的容器。 很疯狂的东西，但看看面具能做什么很有趣！

3. 图像遮罩

这个简单明了的示例展示了 CSS 图像蒙版的外观。 您可以看到由 Vincent De Oliveira 创建的上述图像蒙版的前后。

请注意，实际的黑色纹理蒙版只是一个 PNG 文件。 但它在 CSS 中动态地叠加在图像上以创建蒙版照片效果。

您可以使用任何您想要的纹理来执行此操作，只要它以透明度导出即可。 mask 属性有很多细节，虽然它确实支持 .svg 文件，但您可能会发现从 PNG 开始更容易。

4. 按钮悬停

有没有想过自定义您的按钮悬停效果？ 好吧，这段代码证明了你可以通过一些创造力和一些 CSS 屏蔽来实现。

同样，代码都在预定义的图像蒙版上运行，每个按钮都有自己的蒙版效果。 最酷的部分是悬停动画，它不仅显示面具，而且将其动画化。

这当然是一段实验性的代码，但它在 WebKit 浏览器中看起来很惊人，希望这种技术在几年内成为主要技术。

5. SVG 文字遮罩

这是开发人员 Marco Barria 创建的文本蒙版效果的一个稍微不同的示例。

代码实际上使用了 SVG 元素，而不是定义自定义 SVG 图像。 它仍然建立在纯 HTML 文本内容之上，但它使用动态 SVG 过滤器运行。

这有点技术性，但也授予开发人员更多的控制权。 您可以直接在 HTML 文档中编写内联 SVG，而不是使用 Illustrator 创建 SVG 文件。

6. 画布文字遮罩

在 Calvin Davis 的这个画布示例中，您会注意到它使用原始 HTML 作为内容，但文本本身是不可选择的。

相反，它使用 Canvas 元素呈现在页面上，该元素可以在 DOM 之外抽象文本。 这使它的行为更像图像，因此您会看到文本遮盖在背景上的效果，但感觉不像文本。

一些设计师可能因为缺乏可用性而不喜欢这个，所以如果你想要可选择的文本，我不会打扰这个设置。

但这是一个很酷的例子，说明你可以用画布形状将排版推到多远。

7.动画渐变

另一个非常酷的文本效果是由开发人员 Svante Richter 创建的动画渐变。

它使用 HTML 页面中的所有 SVG 代码，因此它动态地创建掩码。 此 SVG 设置通过接管整个页面并为其提供渐变背景，然后仅通过文本掩盖此背景。

由于渐变可以通过 CSS 进行动画处理，它看起来好像文本是唯一的动画部分。 非常酷的效果，您可能会考虑将其添加到实验性网站或登录页面。

8. 动画剪贴蒙版

这个抽象的剪贴蒙版动画使用 JS 驱动的随机生成的气泡来蒙版图像。 它使用画布元素和动画剪贴蒙版一起形成一个有凝聚力的 SVG blob 事物。

它可能看起来不多，但开发人员 Neil McCallion 写了一些非常漂亮的代码，最终结果肯定很奇怪。

屏蔽主要发生在画布元素中，但它是通过 JavaScript 控制的。 这是一种将两个图像与抽象 SVG 动画混合的有趣方式。

同样，这在现实世界的网站上可能没有很多用途，但它是修补面具的一个很酷的实验。

9. SVG 背景蒙版

另一方面，这是一个可以在几乎任何网站上运行的掩蔽效果。

这使用背景渐变和英雄标题来创建仍然完美融合的复杂遮罩效果。

开发人员 Ryna Rudenko 用这支笔突破了信封，使用原始画布元素，大多数遮罩效果分层在 HTML 中。

这个掩码不仅在大标题中实用且可用，而且制作精良，仅在 HTML5 和 CSS3 上运行。 现代网络标准的一个典型例子得到了很好的利用。

10. CSS & SVG 蒙版

这个完整的 SVG 蒙版库确实让您了解纯 CSS 可以做多少事情。

这是一个演示，展示了一系列不同的遮罩技术，它们都使用相同的照片、不同的格式。 此外，每个示例都包含您可以自己测试的页面上的示例代码——尽管从 CodePen 的编辑器中复制代码同样容易。

但是这支小笔更像是您可以做的不同图像遮罩效果的引导介绍。 如果您想通过简单的演示深入了解 SVG 和蒙版，那么可以从这里开始。