遮天辰东小说,懒人听书

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇帶你了解奇妙的CSSMASK

顧名思義，mask 譯為遮罩。在 CSS 中，mask 屬性允許使用者通過(guò)遮罩或者裁切特定區(qū)域的圖片的方式來(lái)隱藏一個(gè)元素的部分或者全部可見(jiàn)區(qū)域。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為桂林企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作，桂林網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

其實(shí) mask 的出現(xiàn)已經(jīng)有一段時(shí)間了，只是沒(méi)有特別多實(shí)用的場(chǎng)景，在實(shí)戰(zhàn)中使用的非常少，本文將羅列一些使用 mask 創(chuàng)造出來(lái)的有意思的場(chǎng)景。

語(yǔ)法

最基本，使用 mask 的方式是借助圖片，類似這樣：

{
    /* Image values */
    mask: url(mask.png);                       /* 使用位圖來(lái)做遮罩 */
    mask: url(masks.svg#star);                 /* 使用 SVG 圖形中的形狀來(lái)做遮罩 */
}

當(dāng)然，使用圖片的方式后文會(huì)再講。借助圖片的方式其實(shí)比較繁瑣，因?yàn)槲覀兪紫冗€得準(zhǔn)備相應(yīng)的圖片素材，除了圖片，mask 還可以接受一個(gè)類似 background 的參數(shù)，也就是漸變。

類似如下使用方法：

{
    mask: linear-gradient(#000, transparent)                      /* 使用漸變來(lái)做遮罩 */
}

那該具體怎么使用呢?一個(gè)非常簡(jiǎn)單的例子，上述我們創(chuàng)造了一個(gè)從黑色到透明漸變色，我們將它運(yùn)用到實(shí)際中，代碼類似這樣。

下面這樣一張圖片，疊加上一個(gè)從透明到黑色的漸變，

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

應(yīng)用了 mask 之后，就會(huì)變成這樣：

這個(gè) DEMO，可以先簡(jiǎn)單了解到 mask 的基本用法。

這里得到了使用 mask 最重要結(jié)論：圖片與 mask 生成的漸變的 transparent 的重疊部分，將會(huì)變得透明。

值得注意的是，上面的漸變使用的是 linear-gradient(90deg, transparent, #fff)，這里的 #fff 純色部分其實(shí)換成任意顏色都可以，不影響效果。

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

使用 MASK 進(jìn)行圖片裁切

利用上述簡(jiǎn)單的運(yùn)用，我們可以使用 mask 實(shí)現(xiàn)簡(jiǎn)單的圖片裁剪。

使用 mask 實(shí)現(xiàn)圖片切角遮罩

使用線性漸變，我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的切角圖形：

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

像是這樣：

我們將上述漸變運(yùn)用到 mask 之上，而 background 替換成一張圖片，就可以得到運(yùn)用了切角效果的圖片：

    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 實(shí)現(xiàn)圖片切角遮罩[2]。

當(dāng)然，實(shí)現(xiàn)上述效果還有其他很多種方式，譬如 clip-path，這里的 mask 也是一種方式。

多張圖片下使用 mask

上述是單張圖片使用 mask 的效果。下面我們看看多張圖片下，使用 mask 能碰撞出什么樣的火花。

假設(shè)我們有兩張圖片，使用 mask，可以很好將他們疊加在一起進(jìn)行展示。最常見(jiàn)的一個(gè)用法：

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]。

當(dāng)然，注意上面我們使用的 mask 的漸變，是完全的實(shí)色變化，沒(méi)有過(guò)度效果。

我們稍微修改一下 mask 內(nèi)的漸變：

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

即可得到圖片1向圖片2過(guò)渡切換的效果：

CodePen Demo -- MASK 的基本使用，多張圖片下的基本用法2[4]。

使用 MASK 進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫

有了上面的鋪墊。運(yùn)用上面的介紹的一些方法，我們就可以使用 mask 來(lái)進(jìn)行一些圖片切換間的轉(zhuǎn)場(chǎng)動(dòng)畫。

使用線性漸變 mask:linear-gradient() 進(jìn)行切換

還是上面的 Demo，我們通過(guò)動(dòng)態(tài)的去改變 mask 的值來(lái)實(shí)現(xiàn)圖片的顯示/轉(zhuǎn)場(chǎng)效果。

代碼可能是這樣：

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

當(dāng)然，像上面那樣一個(gè)一個(gè)寫，會(huì)比較費(fèi)力，通常我們會(huì)借助 SASS/LESS 等預(yù)處理器進(jìn)行操作。像是這樣：

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 轉(zhuǎn)場(chǎng)[5]。

使用角向漸變 mask: conic-gradient() 進(jìn)行切換

當(dāng)然，除了 mask: linear-gradient()，使用徑向漸變或者角向漸變也都是可以的。使用角向漸變的原理也是一樣的：

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

可以實(shí)現(xiàn)圖片的角向漸顯/切換：

CodePen Demo -- MASK conic-gradient 轉(zhuǎn)場(chǎng)[6]。

這個(gè)技巧，在張?chǎng)涡竦倪@篇文章里，有更多豐富的例子，可以移步閱讀：

你用的那些CSS轉(zhuǎn)場(chǎng)動(dòng)畫可以換一換了[7]。

運(yùn)用這個(gè)技巧，我們就可以實(shí)現(xiàn)很多有意思的圖片效果。像是這樣：

mask 碰撞濾鏡與混合模式

繼續(xù)下一環(huán)節(jié)。CSS 中很多有意思的屬性，和濾鏡和混合模式一結(jié)合，會(huì)碰撞出更多火花。

mask & 濾鏡 filter: contrast()

首先，我們利用多重徑向漸變，實(shí)現(xiàn)這樣一張圖。

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

看著沒(méi)什么特別，我們利用 filter: contrast() 對(duì)比度濾鏡，改造一下。代碼大概是這樣：

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

即可得到這樣的圖形，利用對(duì)比度濾鏡，將圖形變得非常的銳化。

這個(gè)時(shí)候，我們?cè)侬B加上不同的 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[8]。

我們疊加了一個(gè)線性漸變的 mask linear-gradient(-180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))，注意，兩個(gè)漸變顏色都是帶透明度的。

或者換一個(gè)徑向漸變：

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

CodePen Demo -- 使用 mask 搭配濾鏡 contrast[9]。

好的，下一步，與上文類似，我們添加上動(dòng)畫。

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 +  '%'});
        }
    }
}

看看，可以得到了非?？犰诺膭?dòng)畫效果：

CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫[10]。

還記得使用 filter: hue-rotate() 色相濾鏡嗎。再加上它，我們可以讓顏色也變化起來(lái)。

CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫2[11]。

mask & 濾鏡 filter: contrast() & 混合模式

接下來(lái)我們?cè)侬B加上混合模式。

注意到上面，其實(shí)我們的容器背景色是白色 #fff。

我們可以通過(guò)多嵌套一層層級(jí)，再增加一個(gè)容器背景色，再疊加上混合模式，產(chǎn)生不一樣的效果。

先不添加使用 mask，重新構(gòu)造一下結(jié)構(gòu)，最終的偽代碼是這樣：

.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 還沒(méi)有運(yùn)用上，我們?cè)偬砑由?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]。

實(shí)際效果比截圖好很多，可以點(diǎn)擊 Demo 去看看。

當(dāng)然，這里疊加的是 mix-blend-mode: multiply ，可以嘗試其他混合模式，得到其他不一樣的效果。

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

更多有意思的疊加，感興趣的同學(xué)需要自己多加嘗試。

mask 與圖片

當(dāng)然，mask 最本質(zhì)的作用應(yīng)該還是作用于圖片。上面得到的重要結(jié)論：

圖片與 mask 生成的漸變的 transparent 的重疊部分，將會(huì)變得透明。

也可以作用于 mask 屬性傳入的圖片。也就是說(shuō)，mask 是可以傳入圖片素材的，并且遵循 background-image 與 mask 圖片的透明重疊部分，將會(huì)變得透明。

運(yùn)用這個(gè)技巧，可以制作非?？犰诺霓D(zhuǎn)場(chǎng)動(dòng)畫：

這里其實(shí)主要是在 mask 中運(yùn)用了這樣一張圖片：

然后，使用了逐幀動(dòng)畫，快速切換每一幀的 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 制作轉(zhuǎn)場(chǎng)動(dòng)畫[13]。

當(dāng)然，這個(gè)也是可以加上各種動(dòng)畫的。上面已經(jīng)演示了很多次了，感興趣的同學(xué)可以自己嘗試嘗試。

最后

說(shuō)了這么多，mask 其實(shí)還是屬于一個(gè)比較冷門的屬性。在日常業(yè)務(wù)中能運(yùn)用上的機(jī)會(huì)不多。

而且兼容性不算特別好，打開(kāi) MDN，可以看到，除了 mask 本身，還有很多與 mask 相關(guān)的屬性，只是目前大部分還屬于實(shí)驗(yàn)室階段。本文只是初略的介紹了 mask 本身，對(duì) mask 相關(guān)的一些屬性將會(huì)另起一文。

當(dāng)然，即便如此，從屬性本身而言，我覺(jué)得 mask 還是非常有意思的，帶來(lái)了 CSS 更多可能性。

好了，本文到此結(jié)束，希望對(duì)你有幫助 ????

參考資料

[1]CodePen Demo -- 使用 MASK 的基本使用: https://codepen.io/Chokcoco/pen/YzwZbLQ。

[2]CodePen Demo -- 使用 MASK 實(shí)現(xiàn)圖片切角遮罩: https://codepen.io/Chokcoco/pen/eYJgOxB。

[3]CodePen Demo -- MASK 的基本使用，多張圖片下的基本用法: https://codepen.io/Chokcoco/pen/ZEQeNad。

[4]CodePen Demo -- MASK 的基本使用，多張圖片下的基本用法2: https://codepen.io/Chokcoco/pen/RwrQwXG。

[5]CodePen Demo -- MASK linear-gradient 轉(zhuǎn)場(chǎng): https://codepen.io/Chokcoco/pen/RwrpmyL。

[6]CodePen Demo -- MASK conic-gradient 轉(zhuǎn)場(chǎng): https://codepen.io/Chokcoco/pen/eYJVmZX。

[7]你用的那些CSS轉(zhuǎn)場(chǎng)動(dòng)畫可以換一換了: https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation/。

[8]CodePen Demo -- 使用 mask 搭配濾鏡 contrast: https://codepen.io/Chokcoco/pen/mdVeRVp。

[9]CodePen Demo -- 使用 mask 搭配濾鏡 contrast: https://codepen.io/Chokcoco/pen/GRoQZLa。

[10]CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫: https://codepen.io/Chokcoco/pen/YzweqbB。

[11]CodePen Demo -- 使用 mask 搭配濾鏡 contrast 及動(dòng)畫2: https://codepen.io/Chokcoco/pen/JjGpKjB。

[12]CodePen Demo -- mask & filter & blend-mode: https://codepen.io/Chokcoco/pen/JjGpWWd。

[13]CodePen Demo -- mask 制作轉(zhuǎn)場(chǎng)動(dòng)畫: https://codepen.io/Chokcoco/pen/rNxeKRZ。

[14]Github -- iCSS: https://github.com/chokcoco/iCSS。

文章題目：一篇帶你了解奇妙的CSSMASK
瀏覽路徑：http://m.fisionsoft.com.cn/article/cdjppcg.html