奇特的 CSS 特性 MASK✤详细说明

日期:2021-03-23 类型:科技新闻 

关键词:微擎小程序开发,微信小程序下载,如何在微信上做小程序,调查问卷微信小程序,微信抽签小程序

文中将详细介绍 CSS 中一个十分有趣的特性 mask 。

说白了,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 的基本应用

应用 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 撞击ps滤镜与混和方式

再次下一阶段。CSS 中许多有趣的特性,和ps滤镜和混和方式一融合,会撞击出大量火苗。

mask & ps滤镜 filter: contrast()

最先,大家运用多种轴向渐变色,完成那样一幅图。

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

看见没有什么非常,大家运用filter: contrast()比照度ps滤镜,更新改造一下。编码大约是那样:

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

就可以获得那样的图型,运用比照度ps滤镜,将图型越来越十分的锐化。

这一情况下,大家再累加上不一样的 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 配搭ps滤镜 contrast

大家累加了一个线形渐变色的 masklinear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5)),留意,2个渐变色色调全是带全透明度的。

或是换一个轴向渐变色:

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

CodePen Demo -- 应用 mask 配搭ps滤镜 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 配搭ps滤镜 contrast 及动漫

还还记得应用filter: hue-rotate()色相ps滤镜吗。加上上它,大家可让色调也转变起來。

CodePen Demo -- 应用 mask 配搭ps滤镜 contrast 及动漫2

mask & ps滤镜 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 有关的特性,仅仅现阶段大部分分还归属于试验室环节。文中仅仅初略的详细介绍了 mask 自身,对 mask 有关的一些特性可能另起一文。

自然,就算这般,依附性自身来讲,我认为 mask 還是十分有趣的,产生了 CSS 大量将会性。

到此这篇有关奇特的 CSS 特性 MASK详细说明的文章内容就详细介绍到这了,大量有关CSS 特性 MASK內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!