10 个 CSS、SVG 和 Canvas 蒙版(mask)精彩实例

阅读 5347
收藏 375
2017-10-16
原文链接:svgtrick.com

使用蒙版(mask)来实现一些惊艳的视觉效果,这个技术已经存在很多年了,不过随着浏览器对蒙版(mask)的支持越来越好,最近在web开发中使用蒙版(mask)也变得越来越流行。

本文找了一些使用SVG或者是Canvas蒙版(mask)的实例,展示了蒙版的一些经典的使用方法。

1、文字蒙版(Text Masking)

上面的这个简单的实例是使用了文字蒙版(mask)来实现的,还可以把文字更改你想显示的任意文字。

上面这个实例的效果只需要使用到CSS中的background-clip这个属性就可以做到。可以使用任何你想显示的文字,当然要配合你需要显示的背景图片。至于图片放大缩小的效果,更加简单,使用一点点CSS就可以实现了。

demo

2、多边形蒙版(mask)

demo

上面这个实例使用JavaScript来实现的,虽然动画有点复杂,但都是通过canvas来实现的。效果确实非常惊艳。

上面效果中的多边形蒙版(mask)遮罩效果的设计确实非常独特,至少是我见到的独特的设计。主要使用了JavaScript来创建这些形状作为蒙版(mask)来对背景图片进行遮罩。

上面使用canvas作为一个大的容器以JavaScript驱动来做动画,跟SVG动画的概念差不多。只要发挥你的想象力,可以做出更多有趣的动画效果。

3、图片蒙版(mask)

demo

这个实例是使用CSS中的蒙版(mask)图片来实现的。仔细观察下图片在使用蒙版(mask)前和使用蒙版(mask)后的效果,可以发现使用了蒙版(mask)后的照片在边缘处明显是有一些喷溅的效果。

这张作为蒙版(mask)的图片是一张PNG图片。这张PNG有些地方是透明的还有些是半透明,而蒙版(mask)是支持半透明的,所以把它作为蒙版(mask)来对图片进行遮罩的话,透明区域不显示图片内容而显示底部的背景。半透明区域则会显示图片的内容,只不过会加一点半透明的效果,所以才会出现图中所示的喷溅的视觉效果。

当然,对文字也同样适用。详细的一些蒙版(mask)的知识可以去这里看看。使用SVG也可以做到这样的效果。

4、按钮效果

demo

不知道你有没有看过之前的这篇)关于按钮效果的文章。如果使用蒙版(mask)的话可以做出更加惊艳的效果。

上面按钮的效果也是使用蒙版(mask)来实现的。这个效果最惊艳的是,当鼠标经过鼠标的时候,使用蒙版(mask)来完成的动画。

使用这种技术在WebKit浏览器中完全没有什么问题,相信在不远的将来,使用这种技术来做动画会成为一种主流的技术。

5、SVG 文字蒙版(mask)

demo

上面的这个效果是 Marco Barría 使用SVG蒙版(mask)来实现的。

跟之前使用CSS的不一样,这个效果是完全使用SVG来实现的,文字也是使用SVG中的text标签来完成的。

跟CSS相比起来,在技术上更复杂点,但也给开发人员更多的选项来实现想要的效果。而且使用SVG还有诸如Adobe Illustrator这样的矢量设计工具支持导出SVG。

6、Canvas文字蒙版(mask)

demo

上面这个效果是Calvin Davis使用Canvas实现的,虽然是使用的Canvas一样可以自适应。

由于是使用Canvas来实现的,而Canvas是二维的画布会转换成为图来显示。所以Canvas更像是使用设计工具设计好图片效果然后显示在网页上。

一些设计师可能认为使用Canvas不是很灵活,如果你想是文字的配置更灵活,就不建议使用Canvas来实现这种效果。

7、渐变动画

demo

上面这个渐变文字动画效果是Svante Richter使用SVG蒙版(mask)实现的。

整个文字是用SVG来实现的,整个文字区域的背景是用渐变颜色来填充的,通过蒙版(mask)使只有文字区域的渐变颜色才显示。

然后使用CSS的animate属性来移动渐变颜色的位置从而实现渐变的动画效果。这种效果在一些产品的介绍页用的比较多。

8、使用剪裁蒙版(clip-path mask)来做动画效果

demo

上面这个使用剪裁蒙版(clip-path mask)实现的动画效果主要是配合使用了JavaScript来随机生成不同形状的气泡,最会绘制在Canvas上来完成的。

看起是有点复杂,但是Neil McCallion的代码写的非常好,很容易就看懂理解他的思路和方法。

这种方式虽然实际的用处不是很多,但是这种使用剪裁蒙版(clip-path mask)的思路和方法还是非常值得学习的。

9、SVG 背景蒙版(mask)

demo

上面类似这样的效果经常在一些网站上可以见到。

在很多的网站设计中都会使用hero header这一设计元素,在上面的效果中使用了SVG中的渐变和蒙版来实现这个效果。

这种思路和方法不仅可以使用在hero header中,也可以使用在其它你想使用的任何地方,浏览器支持非常好,放心大胆的用。

10、CSS和SVG蒙版(mask)

最后来总结下CSS和SVG蒙版(mask)的使用差异,具体可以去下面的链接看看。

demo

上面链接的中,针对CSS和SVG蒙版(mask)不同都对应给出了实例,可以好好看看。

这里只是抛砖引玉,你完全可以发挥想象力,实现更多有趣的效果。

本文主要是从10 Amazing Examples of CSS, SVG & Canvas Masks In Action这篇文章整理而来,有删减,有疏漏或者理解不到位的地方,还请多多指教!

评论