【遮罩变装秀】用 CSS 搞定服装切换效果！

2023-12-10 10:34:59

在网页上挥洒时尚，开启变装秀

想象一下，在网页上自由切换服装，就像一场时装盛宴。现在，凭借 CSS 的强大功能，这不再是梦想。本文将带领你领略 mask-image 和 mix-blend-mode 属性的魔力，轻松实现服装切换效果，让你的网页成为一个令人惊叹的变装舞台。

准备你的时尚画板

首先，准备好几张不同服装的图片，就像你的时尚调色板。将它们分别命名为 "服装1.png"、"服装2.png" 等。

然后，创建一个 HTML 文件，就像一个虚拟的衣帽间。在其中添加一个 <div> 元素，作为放置服装图片的模特。最后，在 <div> 元素中放一个 <img> 元素，就像模特身上的衣服。

用 CSS 点亮你的时尚

现在，是时候用 CSS 施魔法了。先给 <div> 元素穿上基本样式，就像给模特打底妆一样：

div {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

接着，给 <img> 元素赋予服装的属性，就像给模特穿衣服一样：

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

现在，服装图片已经乖乖地穿在模特身上了。让我们用 mask-image 和 mix-blend-mode 属性，就像化妆品一样，打造出令人惊艳的切换效果。

div {
  mask-image: url(服装1.png);
  -webkit-mask-image: url(服装1.png);
  mix-blend-mode: multiply;
}

当你将鼠标悬停在模特身上时，服装图片就会幻化成 "服装1.png"，就像模特换了一件新装。

让时尚动起来

为了让变装秀更加生动，我们可以让服装动起来，就像模特在 T 台上走秀一样。

div:hover {
  animation: change 2s infinite alternate;
}

@keyframes change {
  0% {
    mask-image: url(服装1.png);
    -webkit-mask-image: url(服装1.png);
  }
  50% {
    mask-image: url(服装2.png);
    -webkit-mask-image: url(服装2.png);
  }
  100% {
    mask-image: url(服装3.png);
    -webkit-mask-image: url(服装3.png);
  }
}