奇妙的 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;
    }
}
複製代碼