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 和蒙版，那麼可以從這裡開始。