奇妙的 CSS MASK

时间 2020-07-07

标签奇妙 css mask 栏目 CSS 繁體版

原文原文链接

本文将介绍 CSS 中一个很是有意思的属性 mask 。css

顾名思义，mask 译为遮罩。在 CSS 中，mask 属性容许使用者经过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者所有可见区域。html

其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的很是少，本文将罗列一些使用 mask 创造出来的有意思的场景。git

语法

最基本，使用 mask 的方式是借助图片，相似这样：github

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位图来作遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来作遮罩 */
}
复制代码

固然，使用图片的方式后文会再讲。借助图片的方式其实比较繁琐，由于咱们首先还得准备相应的图片素材，除了图片，mask 还能够接受一个相似 background 的参数，也就是渐变。bash

相似以下使用方法：svg

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来作遮罩 */
}
复制代码

那该具体怎么使用呢？一个很是简单的例子，上述咱们创造了一个从黑色到透明渐变色，咱们将它运用到实际中，代码相似这样：wordpress

下面这样一张图片，叠加上一个从透明到黑色的渐变，动画

{
    background: url(image.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}
复制代码

应用了 mask 以后，就会变成这样：ui

这个 DEMO，能够先简单了解到 mask 的基本用法。url

这里获得了使用 mask 最重要结论：图片与 mask 生成的渐变的 transparent 的重叠部分，将会变得透明。

值得注意的是，上面的渐变使用的是 linear-gradient(90deg, transparent, #fff)，这里的 #fff 纯色部分其实换成任意颜色均可以，不影响效果。

CodePen Demo -- 使用 MASK 的基本使用

使用 MASK 进行图片裁切

利用上述简单的运用，咱们可使用 mask 实现简单的图片裁剪。

使用 mask 实现图片切角遮罩

使用线性渐变，咱们实现一个简单的切角图形：

.notching{
    width: 200px;
    height: 120px;
    background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, deeppink 0)
    top right,
    linear-gradient(-45deg, transparent 15px, deeppink 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, deeppink 0)
    bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
复制代码

像是这样：

咱们将上述渐变运用到 mask 之上，而 background 替换成一张图片，就能够获得运用了切角效果的图片：

background: url(image.png);
    mask:
        linear-gradient(135deg, transparent 15px, #fff 0)
        top left,
        linear-gradient(-135deg, transparent 15px, #fff 0)
        top right,
        linear-gradient(-45deg, transparent 15px, #fff 0)
        bottom right,
        linear-gradient(45deg, transparent 15px, #fff 0)
        bottom left;
    mask-size: 50% 50%;
    mask-repeat: no-repeat;
复制代码

获得的效果以下:

CodePen Demo -- 使用 MASK 实现图片切角遮罩

固然，实现上述效果还有其余不少种方式，譬如 clip-path，这里的 mask 也是一种方式。

多张图片下使用 mask

上述是单张图片使用 mask 的效果。下面咱们看看多张图片下，使用 mask 能碰撞出什么样的火花。

假设咱们有两张图片，使用 mask，能够很好将他们叠加在一块儿进行展现。最多见的一个用法：

div {
    position: relative;
    background: url(image1.jpg);

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image2.jpg);
        mask: linear-gradient(45deg, #000 50%, transparent 50%);
    }
}

复制代码

两张图片，一张彻底重叠在另一张之上，而后使用 mask: linear-gradient(45deg, #000 50%, transparent 50%) 分割两张图片：

CodePen Demo -- MASK 的基本使用，多张图片下的基本用法

固然，注意上面咱们使用的 mask 的渐变，是彻底的实色变化，没有过分效果。

咱们稍微修改一下 mask 内的渐变：

{
- mask: linear-gradient(45deg, #000 50%, transparent 50%)
+ mask: linear-gradient(45deg, #000 40%, transparent 60%)
}
复制代码

便可获得图片1向图片2过渡切换的效果：

CodePen Demo -- MASK 的基本使用，多张图片下的基本用法2

使用 MASK 进行转场动画

有了上面的铺垫。运用上面的介绍的一些方法，咱们就可使用 mask 来进行一些图片切换间的转场动画。

使用线性渐变 mask:linear-gradient() 进行切换

仍是上面的 Demo，咱们经过动态的去改变 mask 的值来实现图片的显示/转场效果。

代码多是这样：

div {
    background: url(image1.jpg);
    animation: maskMove 2s linear;
}

@keyframes {
  0% {
    mask: linear-gradient(45deg, #000 0%, transparent 5%, transparent 5%);
  }
  1% {
    mask: linear-gradient(45deg, #000 1%, transparent 6%, transparent 6%);
  }
  ...
  100% {
    mask: linear-gradient(45deg, #000 100%, transparent 105%, transparent 105%);
  }
}
复制代码

固然，像上面那样一个一个写，会比较费力，一般咱们会借助 SASS/LESS 等预处理器进行操做。像是这样：

div {
    position: relative;
    background: url(image2.jpg) no-repeat;

    &::before {
        position: absolute;
        content: "";
        top: 0;left: 0; right: 0;bottom: 0;
        background: url(image1.jpg);
        animation: maskRotate 1.2s ease-in-out;
    }
}

@keyframes maskRotate {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: linear-gradient(45deg, #000 #{$i + '%'}, transparent #{$i + 5 + '%'}, transparent 1%);
        }
    }
}
复制代码

能够获得下面这样的效果（单张图片的显隐及两张图片下的切换）：

CodePen Demo -- MASK linear-gradient 转场

使用角向渐变 mask: conic-gradient() 进行切换

固然，除了 mask: linear-gradient()，使用径向渐变或者角向渐变也都是能够的。使用角向渐变的原理也是同样的：

@keyframes maskRotate {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: conic-gradient(#000 #{$i - 10 + '%'}, transparent #{$i + '%'}, transparent);
        }
    }
}
复制代码

能够实现图片的角向渐显/切换：

CodePen Demo -- MASK conic-gradient 转场

这个技巧，在张鑫旭的这篇文章里，有更多丰富的例子，能够移步阅读：

你用的那些CSS转场动画能够换一换了

运用这个技巧，咱们就能够实现不少有意思的图片效果。像是这样：

mask 碰撞滤镜与混合模式

继续下一环节。CSS 中不少有意思的属性，和滤镜和混合模式一结合，会碰撞出更多火花。

mask & 滤镜 filter: contrast()

首先，咱们利用多重径向渐变，实现这样一张图。

{
  background: radial-gradient(#000, transparent);
  background-size: 20px 20px;
}
复制代码

看着没什么特别，咱们利用 filter: contrast() 对比度滤镜，改造一下。代码大概是这样：

html,body {
    width: 100%;
    height: 100%;
    filter: contrast(5);
}

div {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
    }
}
复制代码

便可获得这样的图形，利用对比度滤镜，将图形变得很是的锐化。

这个时候，咱们再叠加上不一样的 mask 遮罩。便可获得各类有意思的图形效果。

body {
    filter: contrast(5);
}

div {
    position: relative;
    background: #fff;
    
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
      + mask: linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5));
    }
}
复制代码

CodePen Demo -- 使用 mask 搭配滤镜 contrast

咱们叠加了一个线性渐变的 mask linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))，注意，两个渐变颜色都是带透明度的。

或者换一个径向渐变：

{
    mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
}
复制代码

CodePen Demo -- 使用 mask 搭配滤镜 contrast

好的，下一步，与上文相似，咱们添加上动画。

div {
    ...
    
    &::before {
        background: radial-gradient(#000, transparent);
        background-size: 20px 20px;
        mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 25%);
        animation: maskMove 15s infinite linear;
    }
}

@keyframes maskMove {
    @for $i from 0 through 100 { 
        #{$i}% {
            mask: repeating-radial-gradient(circle at 35% 65%, #000, rgba(0, 0, 0, .5), #000 #{$i + 10 +  '%'});
        }
    }
}
复制代码

看看，能够获得了很是酷炫的动画效果：

CodePen Demo -- 使用 mask 搭配滤镜 contrast 及动画

还记得使用 filter: hue-rotate() 色相滤镜吗。再加上它，咱们可让颜色也变化起来。

CodePen Demo -- 使用 mask 搭配滤镜 contrast 及动画2

mask & 滤镜 filter: contrast() & 混合模式

接下来咱们再叠加上混合模式。

注意到上面，其实咱们的容器背景色是白色 #fff。

咱们能够经过多嵌套一层层级，再增长一个容器背景色，再叠加上混合模式，产生不同的效果。

先不添加使用 mask，从新构造一下结构，最终的伪代码带个是这样：

<div class="wrap">
    <div class="inner"></div>
</div>
复制代码

.wrap {
    position: relative;
    height: 100%;
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}

.inner {
    height: 100%;
    background: #000;
    filter: contrast(700%);
    mix-blend-mode: multiply;
    
    &::before {
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
    }
}
复制代码

原理示例图以下：

咱们就能够获得以下的效果：

OK，到这一步，mask 尚未运用上，咱们再添加上 mask。

.wrap {
    background: linear-gradient(45deg, #f44336, #ff9800, #ffeb3b, #8bc34a, #00bcd4, #673ab7);
}

.inner {
    ...
    filter: contrast(700%);
    mix-blend-mode: multiply;
    
    &::before {
        background: radial-gradient(#fff, transparent);
        background-size: 12px 12px;
      + mask: linear-gradient(#000, rgba(0, 0, 0, .5));
    }
}
复制代码

CodePen Demo -- mask & filter & blend-mode

实际效果比截图好不少，能够点击 Demo 去看看。

固然，这里叠加的是 mix-blend-mode: multiply ，能够尝试其余混合模式，获得其余不同的效果。

譬如，叠加 mix-blend-mode: difference，等等等等：

更多有意思的叠加，感兴趣的同窗须要本身多加尝试。

mask 与图片

固然，mask 最本质的做用应该仍是做用于图片。上面获得的重要结论：

图片与 mask 生成的渐变的 transparent 的重叠部分，将会变得透明。

也能够做用于 mask 属性传入的图片。也就是说，mask 是能够传入图片素材的，而且遵循 background-image 与 mask 图片的透明重叠部分，将会变得透明。

运用这个技巧，能够制做很是酷炫的转场动画：

这里其实主要是在 mask 中运用了这样一张图片：

而后，使用了逐帧动画，快速切换每一帧的 mask ：

.img1 {
    background: url(image1.jpg) no-repeat left top;
}

.img2 {
    mask: url(https://i.imgur.com/AYJuRke.png);
    mask-size: 3000% 100%;
    animation: maskMove 2s steps(29) infinite;
}

.img2::before {
    background: url(image2.jpg) no-repeat left top;
}

@keyframes maskMove {
    from {
        mask-position: 0 0;
    }
    to {
        mask-position: 100% 0;
    }
}
复制代码

CodePen Demo -- mask 制做转场动画

固然，这个也是能够加上各类动画的。上面已经演示了不少次了，感兴趣的同窗能够本身尝试尝试。

最后

说了这么多，mask 其实仍是属于一个比较冷门的属性。在平常业务中能运用上的机会很少。

并且兼容性不算特别好，打开 MDN，能够看到 mask 相关的很是多属性目前还属于实验室阶段。

固然，即使如此，从属性自己而言，我以为 mask 仍是很是有意思的，带来了 CSS 更多可能性。

好了，本文到此结束，但愿对你有帮助 :)

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。

1. 奇妙的 CSS MASK
2. 奇妙的 CSS shapes(CSS图形)
3. 奇妙的 CSS几何图形
4. 奇妙的CSS之布局与定位
5. CSS 奇思妙想边框动画
6. 奇妙的数字
7. 【CLR】奇妙的String
8. #（四）、奇妙的波
9. 奇妙世界
10. [译]Webpack的奇妙世界
更多相关文章...
• CSS 指南 - 网站建设指南
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• 漫谈MySQL的锁机制
• 互联网组织的未来：剖析GitHub员工的任性之源