令你叹为观止的 CSS、SVG 和 Canvas 蒙版典范

2023-09-13 16:19:16

随着对蒙版（mask）的支持越来越好，在web开发中使用蒙版（mask）也变得越来越流行，使用它可以实现一些非常好的视觉效果。蒙版可以通过多种方式实现，使用 CSS、SVG 或 Canvas，都可以实现不同的效果。本文将介绍 10 个 CSS、SVG 和 Canvas 蒙版（mask）的精彩实例，激发您的设计灵感。

1. CSS 蒙版

CSS 蒙版是一种使用 CSS 属性来实现蒙版的技术。CSS 蒙版可以创建各种形状的蒙版，也可以使用图像作为蒙版。

例如，下面的代码使用一个圆形蒙版来隐藏图像的一部分：

.image {
  mask: url(mask.png);
}

2. SVG 蒙版

SVG 蒙版是一种使用 SVG 图形作为蒙版的技术。SVG 蒙版可以创建复杂的蒙版形状，并且可以与 CSS 动画结合使用。

例如，下面的代码使用一个 SVG 路径作为蒙版来创建波浪效果：

<svg mask="url(#mask)">
  <path id="mask" d="M0,0 C150,0 150,100 0,100 Z" />
  <image href="image.png" />
</svg>

3. Canvas 蒙版

Canvas 蒙版是一种使用 Canvas API 来创建蒙版的技术。Canvas 蒙版可以创建复杂的蒙版形状，并且可以与 JavaScript 代码结合使用。

例如，下面的代码使用一个 Canvas 蒙版来创建渐变效果：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(image, 0, 0);

4. 带有阴影的蒙版

蒙版可以与阴影结合使用，以创建更具深度的效果。例如，下面的代码使用一个圆形蒙版和一个阴影来创建浮动按钮效果：

.button {
  mask: url(mask.png);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

5. 带有动画的蒙版

蒙版可以与动画结合使用，以创建动态效果。例如，下面的代码使用一个 SVG 蒙版和一个 CSS 动画来创建波浪效果：

<svg mask="url(#mask)">
  <path id="mask" d="M0,0 C150,0 150,100 0,100 Z" />
  <image href="image.png" />
</svg>

@keyframes wave {
  0% {
    d: "M0,0 C150,0 150,100 0,100 Z";
  }
  50% {
    d: "M0,50 C150,50 150,150 0,150 Z";
  }
  100% {
    d: "M0,0 C150,0 150,100 0,100 Z";
  }
}

#mask {
  animation: wave 2s infinite alternate;
}

6. 带有图像的蒙版

蒙版可以与图像结合使用，以创建剪贴画效果。例如，下面的代码使用一个圆形蒙版和一张图像来创建一个剪贴画效果：

.image {
  mask: url(mask.png);
  background-image: url(image.png);
}

7. 带有文本的蒙版

蒙版可以与文本结合使用，以创建文字蒙版效果。例如，下面的代码使用一个圆形蒙版和一个文本来创建一个文字蒙版效果：

.text {
  mask: url(mask.png);
  color: white;
  font-size: 24px;
}

8. 带有视频的蒙版

蒙版可以与视频结合使用，以创建画中画效果。例如，下面的代码使用一个圆形蒙版和一个视频来创建一个画中画效果：

<video mask="url(mask.png)">
  <source src="video.mp4" type="video/mp4">
</video>

9. 带有交互性的蒙版

蒙版可以与交互性结合使用，以创建交互式效果。例如，下面的代码使用一个圆形蒙版和一个 JavaScript 代码来创建一个交互式效果：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.addEventListener("mousemove", function(e) {
  var x = e.clientX;
  var y = e.clientY;

  ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(image, x - 50, y - 50);
});