建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
當(dāng)然，它是一個(gè)動(dòng)態(tài)的效果，當(dāng)選人的過(guò)程中，會(huì)有一種呼吸的效果：
Gif 圖有點(diǎn)糊，總的而言，就是一種接近迷霧的遮罩效果。并且，他是能夠動(dòng)態(tài)變化的。
本文將探究，在 CSS 中，我們應(yīng)該如何去實(shí)現(xiàn)類(lèi)似的效果。
實(shí)現(xiàn)煙霧化遮罩效果
首先，我們來(lái)嘗試實(shí)現(xiàn)這樣一個(gè)動(dòng)態(tài)遮罩：
假設(shè)沒(méi)有模糊的邊緣，及煙霧化的效果，它其實(shí)就是一個(gè)漸變：
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)由上述代碼，我們可得到：
好吧，看著確實(shí)平平無(wú)奇，我們?nèi)绾卫盟?，得到一個(gè)霧化的效果呢?
提到煙霧，聰明的同學(xué)應(yīng)該能想到濾鏡，當(dāng)然，是 SVG 的 濾鏡。
沒(méi)錯(cuò)，又是它， 確實(shí)太有意思了，我最近的兩篇關(guān)于它的文章 -- Amazing!!CSS 也能實(shí)現(xiàn)煙霧效果?[1]、Amazing!!CSS 也能實(shí)現(xiàn)極光?[2] 可以一并閱讀。
的 type="fractalNoise" 在模擬云霧效果時(shí)非常好用。該濾鏡利用 Perlin 噪聲函數(shù)創(chuàng)建了一個(gè)圖像，能夠?qū)崿F(xiàn)半透明的煙熏或波狀圖像，用于實(shí)現(xiàn)一些特殊的紋理。
這里，我們利用 濾鏡簡(jiǎn)單處理一下上述圖形：
CSS 中，可以利用 filter: url() 對(duì)對(duì)應(yīng)的元素引入該濾鏡：
div {
...
filter: url(#smoke);
}作用了濾鏡的元素的效果：
由于我給元素加了邊框，整個(gè)邊框也被霧化了，這不是我們想要的，可以使用偽元素改造一下，邊框作用于容器，使用偽元素實(shí)現(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);
}
}改造后的效果如下：
好，又接近了一步，但是四周有很多瑕疵沒(méi)有被填滿(mǎn)。問(wèn)題不大，我們改變一下定位的 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)整之后，看看效果：
有點(diǎn)那感覺(jué)了，下一步，只需要讓煙霧元素動(dòng)起來(lái)，為了讓整個(gè)效果連貫(由于 SVG 動(dòng)畫(huà)本身不支持類(lèi)似 animation-fill-mode: alternate 這種特性)，我們還是需要寫(xiě)一點(diǎn) JavaScript 代碼，控制動(dòng)畫(huà)的整體循環(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);這段代碼做的事情，其實(shí)只有一個(gè)，就是讓 SVG 的 #turbulence 濾鏡的 baseFrequency 屬性，在一個(gè)區(qū)間內(nèi)無(wú)限循環(huán)，僅此而已。通過(guò)改變 baseFrequency，讓整個(gè)煙霧不斷變化。
至此，我們就得到了一幅完整的，會(huì)動(dòng)的煙霧遮罩：
補(bǔ)充下框內(nèi)的圖片，就能得到一開(kāi)始給出的效果圖效果：
完整的代碼，你可以戳這里 -- CodePen Demos -- LPL BAN PICK MASK Effect[3]
實(shí)現(xiàn)呼吸狀態(tài)的遮罩效果
在上述基礎(chǔ)上，再加入呼吸的效果，其實(shí)就非常簡(jiǎn)單了。
我們只需要去改變漸變的一個(gè)位置即可，方法非常多，這里我給一個(gè)較為優(yōu)雅但是兼容性可能沒(méi)那么好的方法 -- CSS @property。
簡(jiǎn)單改造上述代碼：
@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%;
}
} 這樣，呼吸效果就實(shí)現(xiàn)了：
完整的代碼，你可以戳這里 -- CodePen Demos -- LPL BAN PICK MASK Effect[4]
最后
好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 ????
參考資料
[1]Amazing!!CSS 也能實(shí)現(xiàn)煙霧效果?: https://github.com/chokcoco/iCSS/issues/156
[2]Amazing!!CSS 也能實(shí)現(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
當(dāng)前名稱(chēng)：LPLBan/Pick選人階段的遮罩效果是如何實(shí)現(xiàn)的？
URL分享：http://m.fisionsoft.com.cn/article/ccsddhp.html
