CSS新方法 mask-composite

属性对于使用 CSS 剪切 特定形状mask-image非常有用。通过使用属性将遮罩图像mask-image应用到元素，您可以仅遮罩该图像的不透明部分。mask-image自 2024 年起可用的属性mask-composite允许您指定如何合成掩码。

mask-composite 属性的值与其 mask 结果之间的差异

mask-composite该属性用于指定如何组合多个蒙版图像。事实上，mask-image属性还支持指定多个图像。从多个图像生成遮罩区域时，mask-composite您可以使用属性创建复杂的遮罩区域。

background-image可以通过用逗号分隔来指定多个蒙版图像，就像多个属性一样。

mask-image: url("mask1.png"), url("mask2.png");

mask-sizemask-position也可以指定多个属性和属性。mask-image相应的值将按此顺序应用。

/* 图片1 100px 100px  图像2 50px 50px */
mask-size: 100px 100px, 50px 50px;

/* 图片位置*/
mask-position: 0 0, 50px 50px;

mask-composite当多个蒙版图像像这样放置时，该属性决定了蒙版图像如何组合。mask-composite该属性有四个值：

• add
• subtract
• intersect
• exclude

默认值为add，它会添加每个区域。subtract从第一个遮罩图像中减去第二个遮罩图像。intersect遮罩区域是遮罩图像的重叠部分。遮罩区域是exclude遮罩图像的重叠区域以外的区域。下图将帮助您理解差异。

根据遮罩图像和合成方法得出的遮罩区域结果

mask-composite如果有三个或更多图像，可以使用多个属性来指定重叠程度，但会变得复杂。基本上，它是根据上面的遮罩图像以相反的顺序计算的（稍后描述）。例如，mask-composite假设您有三个遮罩图像和属性，如下所示。

mask-image: url("mask1.png"), url("mask2.png"), url("mask3.png");
mask-composite: add, subtract;

此时，我们是从上到下处理的，所以mask2.png首先我们将mask3.png和组合起来，然后将结果与组合起来。subtract mask1.png add

注意兼容模式-webkit-mask-composite，2024年后可以不用写前缀。

使用 mask-composite 构建蒙版

现在将mask-composite介绍使用属性的蒙版组合的更实用的表现形式。

中间切一个圆圈的面具

通过使用中间带有黑色圆圈的遮罩图像，可以遮盖特定区域以外的部分，mask-composite: exclude这在过去是很困难的。

这可以通过 HTML 和 CSS 来实现，如下所示

<div class="centerHoleMask"></div>

.centerHoleMask {
  mask-image: linear-gradient(#000, #000), url(".svg");
  mask-repeat: no-repeat;
  mask-position: 0 0, center center;
  mask-size: 100% 100%, 480px 320px;
  mask-composite: exclude;
}

mask-image第一个属性值为linear-gradient()，用于屏蔽整个区域。第二个指定一个带有黑色中心的圆形蒙版图像。mask-composite: exclude从整体中除去中间圆形部分的区域成为遮罩。

这种方法的优点是可以轻松适应屏幕尺寸的变化。以前，这是通过准备一个除中心之外填充不透明的图像来处理的，但是当屏幕比蒙版图像大时，某些部分无法正确蒙版，并且蒙版中孔的大小可能会改变。有很多限制，比如必须这样做。不过，通过这种方法，即使屏幕变大，也可以固定遮罩孔并扩大遮罩面积。

使用蒙版的动画

在某些情况下，单独为蒙版预先创建和排列这样的图像就足够了，但 CSS 蒙版的优点是可以用蒙版动画表达广泛的表情。

使用交叉点的动画

这是一个动画，其中两个图像流动，另一个图像显示在它们重叠的位置。

<img
  src="/assets/images/bg.webp"
  class="intersectionAnimationImage intersectionAnimationImage1"
/>
<img
  src="/assets/images/bg2.webp"
  class="intersectionAnimationImage intersectionAnimationImage2"
/>
<img
  src="/assets/images/bg3.webp"
  class="intersectionAnimationImage intersectionAnimationImage3"
/>

.intersectionAnimationImage {
  mask-repeat: no-repeat;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.intersectionAnimationImage1 {
  mask-image: url("/assets/images/intersection_mask1.png");
  animation-name: intersection1;
}

.intersectionAnimationImage2 {
  mask-image: url("/assets/images/intersection_mask2.png");
  animation-name: intersection2;
}

.intersectionAnimationImage3 {
  mask-image: url("/assets/images/intersection_mask1.png"),
    url("/assets/images/intersection_mask2.png");
  mask-composite: intersect;
  animation-name: intersection3;
}

@keyframes intersection1 {
  0% {
    mask-position: -1280px 0;
  }

  100% {
    mask-position: 0 0;
  }
}

@keyframes intersection2 {
  0% {
    mask-position: right -1280px bottom 0;
  }

  100% {
    mask-position: right 0 bottom 0;
  }
}

@keyframes intersection3 {
  0% {
    mask-position: -1280px 0, right -1280px bottom 0;
  }

  100% {
    mask-position: 0 0, right 0 bottom 0;
  }
}

1图像和2图像使用单独的掩模图像进行流式传输，但交叉点处的3图像是两个掩模的合成。通过更改动画的关键帧mask-position，您可以移动蒙版位置并营造图像流动的印象。

使用圆形蒙版的过渡表现

一个使用转换的表现作为使用前面提到的圆形掩码的高级表现。

<img src="/assets/images/bg.webp" />
<div class="transitionAnimationMask transitionAnimationMask1"></div>
<div class="transitionAnimationMask transitionAnimationMask2"></div>

.transitionAnimationMask {
  mask-image: linear-gradient(#000, #000), url("/assets/images/mask_circle.svg");
  mask-repeat: no-repeat;
  mask-position: 0 0, center center;
  mask-size: 100% 100%, 0 0;
  mask-composite: exclude;
  animation-timing-function: var(--ease-out-quart);
  animation-fill-mode: forwards;
}

.transitionAnimationMask1 {
  animation-duration: 1s;
  animation-delay: 0.2s;

  &.isActive {
    animation-name: maskAnimation;
  }
}

.transitionAnimationMask2 {
  animation-duration: 1.1s;

  &.isActive {
    animation-name: maskAnimation;
  }
}

@keyframes maskAnimation {
  0% {
    mask-size: 100% 100%, 0 0;
  }

  100% {
    mask-size: 100% 100%, 800px 800px;
  }
}

两个蒙版图像放置在背景图像上方。通过对每个蒙版应用圆形蒙版并使用动画更改蒙版大小，可以创建一个使背景图像呈现圆形的表现。第一个和第二个动画的开始时间略有不同，持续时间也略有不同，从而产生一种扩展的过渡效果。

与滚动相关的遮罩表现

通过进一步应用过渡蒙版示例，我们将介绍与滚动相关的蒙版表现。这是一种看起来像是可以通过字母“GO”的字母O上的孔看到背景图像的表现。

<div class="scrollMask">
  <div class="scrollMaskInner">
    <div class="wall">
      <div class="wallMask"></div>
      <div class="text">GO</div>
    </div>
    <img class="wallImage" src="/assets/images/bg.webp" />
  </div>
</div>

.wallMask {
  background-color: var(--color-primary);
  mask-image: linear-gradient(#000, #000),
    radial-gradient(#000 0, #000 50%, transparent 50%, transparent 100%);
  mask-repeat: no-repeat;
  mask-position:
    0 0,
    323px 237px; /* 「O」定位位置 */
  mask-size:
    100% 100%,
    16px 18px; /* 「O」的size */
  mask-composite: exclude;
  transform-origin: 331px 246px; /*「O」中心起点位置 */
}

// 缩放大小
const ENOUGH_SCALE = 94;
const scrollArea = document.querySelector(".scrollMask");
const wallMask = document.querySelector(".wallMask");
const text = document.querySelector(".text");

// 根据滚动事件更改缩放
scrollArea.addEventListener("scroll", (event) => {
  // 按滚动量放大
  const scaleRatio = 1 + event.target.scrollTop / 11;
  if (event.target.scrollTop < 0) {
    return;
  }
  text.style.scale = `${scaleRatio}`;
  wallMask.style.scale = `${scaleRatio}`;

  // 当足够大时隐藏
  if (scaleRatio > ENOUGH_SCALE) {
    wallMask.style.visibility = "hidden";
  } else {
    wallMask.style.visibility = "visible";
  }
});

蒙版和文本位置position: sticky是固定的，但请根据使用情况适当更改。