LPL Ban/Pick 選人階段的遮罩效果是如何實現(xiàn)的？
最近 S11 LPL 春季賽開賽，在看比賽的過程中，我發(fā)現(xiàn)新賽季的 Ban/Pick 選人階段，出現(xiàn)了一種新的，有意思的遮罩效果，如下圖所示：
當(dāng)然，它是一個動態(tài)的效果，當(dāng)選人的過程中，會有一種呼吸的效果：
Gif 圖有點糊，總的而言，就是一種接近迷霧的遮罩效果。并且，他是能夠動態(tài)變化的。
本文將探究，在 CSS 中，我們應(yīng)該如何去實現(xiàn)類似的效果。
實現(xiàn)煙霧化遮罩效果
首先，我們來嘗試實現(xiàn)這樣一個動態(tài)遮罩：
假設(shè)沒有模糊的邊緣，及煙霧化的效果，它其實就是一個漸變：
<div></div>
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)绾卫盟玫揭粋€霧化的效果呢?
提到煙霧，聰明的同學(xué)應(yīng)該能想到濾鏡，當(dāng)然，是 SVG 的 濾鏡。
沒錯，又是它， 確實太有意思了，我最近的兩篇關(guān)于它的文章 -- Amazing!!CSS 也能實現(xiàn)煙霧效果?[1]、Amazing!!CSS 也能實現(xiàn)極光?[2] 可以一并閱讀。
的 type="fractalNoise" 在模擬云霧效果時非常好用。該濾鏡利用 Perlin 噪聲函數(shù)創(chuàng)建了一個圖像，能夠?qū)崿F(xiàn)半透明的煙熏或波狀圖像，用于實現(xiàn)一些特殊的紋理。
這里，我們利用 濾鏡簡單處理一下上述圖形：
<div></div>
<svg width="0">
<filter id="filter">
<feTurbulence id="turbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
<feDisplacementMap in="SourceGraphic" scale="30" />
</filter>
</svg>
CSS 中，可以利用 filter: url() 對對應(yīng)的元素引入該濾鏡：
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，讓偽元素超出父容器，父容器設(shè)置 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)的遮罩效果
在上述基礎(chǔ)上，再加入呼吸的效果，其實就非常簡單了。
我們只需要去改變漸變的一個位置即可，方法非常多，這里我給一個較為優(yōu)雅但是兼容性可能沒那么好的方法 -- CSS @property。
簡單改造上述代碼：
@property --per {
syntax: "<percentage>";
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
