當然，它是一個動態(tài)的效果，當選人的過程中，會有一種呼吸的效果：

Gif 圖有點糊，總的而言，就是一種接近迷霧的遮罩效果。并且，他是能夠動態(tài)變化的。

本文將探究，在 CSS 中，我們應該如何去實現(xiàn)類似的效果。

實現(xiàn)煙霧化遮罩效果

首先，我們來嘗試實現(xiàn)這樣一個動態(tài)遮罩：

假設沒有模糊的邊緣，及煙霧化的效果，它其實就是一個漸變：

div {
    width: 340px;
    height: 180px;
    border: 2px solid #5b595b;
    background: linear-gradient(
        rgba(229, 23, 49, 1),
        rgba(229, 23, 49, .9) 48%,
        transparent 55%,
    );
}

經(jīng)由上述代碼，我們可得到：

好吧，看著確實平平無奇，我們?nèi)绾卫盟?，得到一個霧化的效果呢?

提到煙霧，聰明的同學應該能想到濾鏡，當然，是 SVG 的 濾鏡。

沒錯，又是它， 確實太有意思了，我最近的兩篇關于它的文章 -- Amazing!!CSS 也能實現(xiàn)煙霧效果?[1]、Amazing!!CSS 也能實現(xiàn)極光?[2] 可以一并閱讀。

的 type="fractalNoise" 在模擬云霧效果時非常好用。該濾鏡利用 Perlin 噪聲函數(shù)創(chuàng)建了一個圖像，能夠?qū)崿F(xiàn)半透明的煙熏或波狀圖像，用于實現(xiàn)一些特殊的紋理。

這里，我們利用 濾鏡簡單處理一下上述圖形：

CSS 中，可以利用 filter: url() 對對應的元素引入該濾鏡：

div {
    ...
    filter: url(#smoke);
}

作用了濾鏡的元素的效果：

由于我給元素加了邊框，整個邊框也被霧化了，這不是我們想要的，可以使用偽元素改造一下，邊框作用于容器，使用偽元素實現(xiàn)漸變，將濾鏡作用于偽元素：

div {
    position: relative;
    width: 340px;
    height: 180px;
    border: 2px solid #5b595b;
    
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            30deg,
            rgba(229, 23, 49, 1),
            rgba(229, 23, 49, .9) 48%,
            transparent 55%,
        );
        filter: url(#smoke);
    }
}

改造后的效果如下：

好，又接近了一步，但是四周有很多瑕疵沒有被填滿。問題不大，我們改變一下定位的 top \ left \ right \ bottom，讓偽元素超出父容器，父容器設置 overflow: hidden 即可：

div {
    ....
    overflow: hidden;
    
    &::before {
        ....
        left: -20px;
        top: -10px;
        right: -20px;
        bottom: -20px;
        background: linear-gradient(
            30deg,
            rgba(229, 23, 49, 1),
            rgba(229, 23, 49, .9) 48%,
            transparent 55%,
        );
        filter: url(#smoke);
    }
}

調(diào)整之后，看看效果：

有點那感覺了，下一步，只需要讓煙霧元素動起來，為了讓整個效果連貫(由于 SVG 動畫本身不支持類似 animation-fill-mode: alternate 這種特性)，我們還是需要寫一點 JavaScript 代碼，控制動畫的整體循環(huán)。

大概的代碼是這樣：

const filter = document.querySelector("#turbulence");
let frames = 1;
let rad = Math.PI / 180;
let bfx, bfy;

function freqAnimation() {
    frames += .35;

    bfx = 0.035;
    bfy = 0.015;

    bfx += 0.006 * Math.cos(frames * rad);
    bfy += 0.004 * Math.sin(frames * rad);

    bf = bfx.toString() + " " + bfy.toString();
    filter.setAttributeNS(null, "baseFrequency", bf);

    window.requestAnimationFrame(freqAnimation);
}

window.requestAnimationFrame(freqAnimation);

這段代碼做的事情，其實只有一個，就是讓 SVG 的 #turbulence 濾鏡的 baseFrequency 屬性，在一個區(qū)間內(nèi)無限循環(huán)，僅此而已。通過改變 baseFrequency，讓整個煙霧不斷變化。

至此，我們就得到了一幅完整的，會動的煙霧遮罩：

補充下框內(nèi)的圖片，就能得到一開始給出的效果圖效果：

完整的代碼，你可以戳這里 -- CodePen Demos -- LPL BAN PICK MASK Effect[3]

實現(xiàn)呼吸狀態(tài)的遮罩效果

在上述基礎上，再加入呼吸的效果，其實就非常簡單了。

我們只需要去改變漸變的一個位置即可，方法非常多，這里我給一個較為優(yōu)雅但是兼容性可能沒那么好的方法 -- CSS @property。

簡單改造上述代碼：

@property --per {
    syntax: "";
    inherits: false;
    initial-value: 22%;
}
div::before {
    ...
    background: linear-gradient(
        30deg,
        #ff0020,
        rgba(229, 23, 49, .9) var(--per),
        transparent calc(var(--per) + 8%),
    );
    filter: url(#smoke);
    animation: change 2s infinite ease-out;
}
@keyframes change {
    50% {
        --per: 18%;
    }
}

這樣，呼吸效果就實現(xiàn)了：

完整的代碼，你可以戳這里 -- CodePen Demos -- LPL BAN PICK MASK Effect[4]

最后

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

參考資料

[1]Amazing!!CSS 也能實現(xiàn)煙霧效果?: https://github.com/chokcoco/iCSS/issues/156

[2]Amazing!!CSS 也能實現(xiàn)極光?: https://github.com/chokcoco/iCSS/issues/155

[3]CodePen Demos -- LPL BAN PICK MASK Effect: https://codepen.io/Chokcoco/pen/YzrBxrK

[4]CodePen Demos -- LPL BAN PICK MASK Effect: https://codepen.io/Chokcoco/pen/YzrBxrK

分享題目：LPLBan/Pick選人階段的遮罩效果是如何實現(xiàn)的？
分享鏈接：http://uogjgqi.cn/article/ccsddhp.html