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

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

语法

最基本,使用 mask 的方式是借助图片,类似这样:

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

当然,使用图片的方式后文会再讲。借助图片的方式其实比较繁琐,因为我们首先还得准备相应的图片素材,除了图片,mask 还可以接受一个类似 background 的参数,也就是渐变。

类似如下使用方法:

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来做遮罩 */
}

那该具体怎么使用呢?一个非常简单的例子,上述我们创造了一个从黑色到透明渐变色,我们将它运用到实际中,代码类似这样。

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

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

应用了 mask 之后,就会变成这样:

这个 DEMO,可以先简单了解到 mask 的基本用法。

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

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

CodePen Demo -- 使用 MASK 的基本使用[1]

使用 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 实现图片切角遮罩[2]

当然,实现上述效果还有其他很多种方式,譬如 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 的基本使用,多张图片下的基本用法[3]

当然,注意上面我们使用的 mask 的渐变,是完全的实色变化,没有过度效果。

我们稍微修改一下 mask 内的渐变:

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

即可得到图片1向图片2过渡切换的效果:

CodePen Demo -- MASK 的基本使用,多张图片下的基本用法2[4]

使用 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 转场[5]

使用角向渐变 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 转场[6]

这个技巧,在张鑫旭的这篇文章里,有更多丰富的例子,可以移步阅读:

你用的那些CSS转场动画可以换一换了[7]

运用这个技巧,我们就可以实现很多有意思的图片效果。像是这样:

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));
    }
}

image

CodePen Demo -- 使用 mask 搭配滤镜 contrast[8]

我们叠加了一个线性渐变的 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%);
}

image

CodePen Demo --  使用 mask 搭配滤镜 contrast[9]

好的,下一步,与上文类似,我们添加上动画。

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 及动画[10]

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

mask6

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

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;
    }
}

原理示例图如下:

我们就可以得到如下的效果:

image

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[12]

实际效果比截图好很多,可以点击 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 制作转场动画[13]

当然,这个也是可以加上各种动画的。上面已经演示了很多次了,感兴趣的同学可以自己尝试尝试。

最后

说了这么多,mask 其实还是属于一个比较冷门的属性。在日常业务中能运用上的机会不多。

而且兼容性不算特别好,打开 MDN,可以看到,除了 mask 本身,还有很多与 mask 相关的属性,只是目前大部分还属于实验室阶段。本文只是初略的介绍了 mask 本身,对 mask 相关的一些属性将会另起一文。

当然,即便如此,从属性本身而言,我觉得 mask 还是非常有意思的,带来了 CSS 更多可能性。


好了,本文到此结束,希望对你有帮助 :)

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

CSS 中 MASK 实现图片遮罩登炫酷效果的更多相关文章

  1. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  2. css中文字与图片对齐

    css中文字与图片对齐 第一种,使用vertical-align:middle .icon{ background-repeat:no-repeat; background-position:cent ...

  3. 仿网易/QQ空间视频列表滚动连播炫酷效果

    代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境 需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...

  4. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  5. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

  6. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  7. 基于skitter的轮播图炫酷效果,幻灯片的体验

    概述 包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端 详细 代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...

  8. Android学习笔记_42_各种图形的炫酷效果的实现和使用

    一.文档位置: 这里在android中的图形,在帮助文档的这个页面,  android-sdk-windows\docs\guide\topics\resources\drawable-resourc ...

  9. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...

  10. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

随机推荐

  1. (广州南沙)vue知识点整理2021,主要是防止忘记防备快速翻看

         ///////////////////////////   vue 中使用路由技巧:router //////////////////////////////// 写笔记说明,之前在江门工作 ...

  2. Zabbix“专家坐诊”第181期问答汇总

    问题一 Q:大佬们,有没有基础的 监控模板 触发器分享下? A:你可以试一下乐维免费版(https://forum.lwops.cn/download ),里面基本的模板全齐. 问题二 Q :orab ...

  3. C# 中使对象序列化/反序列化 Json 支持使用派生类型以及泛型的方式

    C# 中使对象序列化/反序列化 Json 支持使用派生类型以及泛型方式 废话 前言 为啥想写这个博客 最近自己写的框架有用到这个 类似工作流,支持节点编码自定义,动态运行自定义. 尽量减少动态解析这就 ...

  4. 摆脱鼠标操作 - vscode - vim - 官方说明文档 github上的,防止打不开,这里发一个

    Key - command done - command done with VS Code specific customization ️ - some variations of the com ...

  5. 选择单词后 按 ctrl + space 单词发音

    需求: 在ide或其他地方,经常有单词发音不是很确定,但并不要很详细 就听个单词发音. 确定快捷键: 左手单手操作,我键盘上貌似就 左边的ctrl和空格键 还没有设定 翻译软件: 使用 pc端的 欧路 ...

  6. 光感红外接近传感器AP3426调试总结

    一 概念 AP3426是一个高度集成了红外,光感和接近角的传感器.该传感器凭借着高灵敏度广泛应用在可穿戴领域.笔者在一个产品上用了这个传感器.花了一些时间来调试和熟悉这个传感器,这里就做一个总结吧. ...

  7. Java Springboot javax.net.ssl.SSLException: Connection reset解决方案

    接口设置HTTPS TLS1.2后,随机出现SSLException: Connection reset报错: javax.net.ssl.SSLException: Connection reset ...

  8. c初探:数据类型、数组、内存布局、指针

    c初探:数据类型.数组.内存布局.指针 目录 c初探:数据类型.数组.内存布局.指针 1.基本数据类型 2.格式化 include <stdio.h> 输出控制符 3.数组与内存布局 动态 ...

  9. FFmpeg命令行之ffmpeg

    一.简述 ffmpeg是一个非常强大的工具,它可以转换任何格式的媒体文件,并且还可以用自己的AudioFilter以及VideoFilter进行处理和编辑.有了它,我们就可以对媒体文件做很多我们想做的 ...

  10. PAT 甲级【1013 Battle Over Cities】

    本题就是dfs.连通图个数-2: 但是java慢,最后一个case 超时 import java.io.*; import java.util.HashSet; import java.util.Se ...