都2024年了你还没有开始探索 CSS 属性 mask 吗？

继上一次原来逆水寒官网这样用CSS进行适配的，我又看到了天谕手游群星计划页面有一个非常有意思的点—轮播图中的每一张图片都是不规则的，这样的实现方式引起了我强烈的好奇心，接下来我们一起看看是怎么实现的。

前言

打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性：

在我们去掉这个mask属性以后，会发现轮播图会有一个白色的背景，这更加让我确定了这个mask属性就是实现这个样式的关键点。所以，接下来让我们来探究一下这个mask到底是何方神圣，居然能完成这样的样式。

介绍

我们先来看看MDN对 mask 的介绍：mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

这个解释肯定让小伙伴们糊里糊涂的，简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划轮播图的例子来说，我们可以发现，img元素的src属性使用的图片是jpg，而mask-image使用的图片是png(jpg 不支持透明，png 支持透明)，所以遮罩图片中不透明的部分和原图片进行合并，得到一个不规则的图片。

mask 属性具有以下几个子属性(和background的属性差不多)：

• mask-image：指定要用作遮罩的图像。
• mask-mode：定义多个图像遮罩层的混合模式。
• mask-repeat：控制遮罩图像的重复方式。
• mask-position：定义遮罩图像的位置。
• mask-clip：遮罩的裁剪方式。
• mask-origin：遮罩的定位原点。
• mask-size：遮罩图像的尺寸。
• mask-composite：多个图像遮罩层之间的混合方式。

下面是该属性的兼容性图览

实践

光说不练肯定是不行的，接下来我们就来使用mask实现一个转场动画。先看看实现后的效果：

代码片段：

 <div class="container"><div class="img1"></div><div class="img2"></div></div><style>.container {height: 200px;width: 400px;margin: 200px auto;position: relative;}.img1 {position: absolute;height: 200px;width: 400px;background: url("./1.jpg") no-repeat left top;background-size: contain;}.img2::before {content: "";display: block;height: 200px;width: 400px;background: url("./2.jpg") no-repeat left top;background-size: contain;}.img2 {position: absolute;height: 200px;width: 400px;mask-image: url("./mask.png");mask-size: 3000% 100%;animation: maskMove 2s steps(29) forwards;}@keyframes maskMove {from {mask-position: 0 0;}to {mask-position: 100% 0;}}</style>