妙??！超酷炫的氣泡效果
最近，在 CodePen 上看到這樣一個(gè)非常有意思的效果：
這個(gè)效果的核心難點(diǎn)在于氣泡的一種特殊融合效果。
其源代碼在：CodePen Demo -- Goey footer[1]，作者主要使用的是 SVG 濾鏡完成的該效果，感興趣的可以戳源碼看看。
其中，要想靈活運(yùn)用 SVG 中的 feGaussianBlur 濾鏡還是需要有非常強(qiáng)大的 SVG 知識(shí)儲(chǔ)備的。那么，僅僅使用 CSS 能否實(shí)現(xiàn)該效果呢？
嘿嘿，強(qiáng)大的 CSS 當(dāng)然是可以的。本文，就將帶領(lǐng)大家一步步使用純 CSS，完成上述效果。
借助 SASS 完成大致效果
首先，如果上述效果沒(méi)有氣泡的融合效果，可能就僅僅是這樣：
要制作這樣一個(gè)效果還是比較簡(jiǎn)單的，只是代碼會(huì)比較多，我們借助 SASS 預(yù)處理器即可。
假設(shè)我們有如下 HTML 結(jié)構(gòu)：
<div class="g-wrap">
<div class="g-footer">
<div class="g-bubble"></div>
<div class="g-bubble"></div>
// ... 200 個(gè) g-bubble
</div>
</div>
核心要做的，僅僅是讓 200 個(gè) .g-bubble 從底部無(wú)規(guī)律的進(jìn)行向上升起的動(dòng)畫(huà)。
這里，就需要運(yùn)用我們?cè)?nbsp;深入淺出 CSS 動(dòng)畫(huà)[2] 這篇文章中所介紹的一種技巧 -- 利用 animation-duration 和 animation-delay 構(gòu)建隨機(jī)效果。
利用 animation-duration 和 animation-delay 構(gòu)建隨機(jī)效果
同一個(gè)動(dòng)畫(huà)，我們利用一定范圍內(nèi)隨機(jī)的 animation-duration 和一定范圍內(nèi)隨機(jī)的 animation-delay，可以有效的構(gòu)建更為隨機(jī)的動(dòng)畫(huà)效果，讓動(dòng)畫(huà)更加的自然。
我們來(lái)模擬一下，如果是使用 10 個(gè) animation-duration 和 animation-delay 都一致的圓的話，核心偽代碼：
<ul>
<li></li>
<!--共 10 個(gè)...-->
<li></li>
</ul>
ul {
display: flex;
flex-wrap: nowrap;
gap: 5px;
}
li {
background: #000;
animation: move 3s infinite 1s linear;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -100px);
}
}
這樣，小球的運(yùn)動(dòng)會(huì)是這樣的整齊劃一：
要讓小球的運(yùn)動(dòng)顯得非常的隨機(jī)，只需要讓 animation-duration 和 animation-delay 都在一定范圍內(nèi)浮動(dòng)即可，改造下 CSS：
@for $i from 1 to 11 {
li:nth-child(#{$i}) {
animation-duration: #{random(2000)/1000 + 2}s;
animation-delay: #{random(1000)/1000 + 1}s;
}
}
我們利用 SASS 的循環(huán)和 random() 函數(shù)，讓 animation-duration 在 2-4 秒范圍內(nèi)隨機(jī)，讓 animation-delay 在 1-2 秒范圍內(nèi)隨機(jī)，這樣，我們就可以得到非常自然且不同的上升動(dòng)畫(huà)效果，基本不會(huì)出現(xiàn)重復(fù)的畫(huà)面，很好的模擬了隨機(jī)效果：
CodePen Demo -- 利用范圍隨機(jī) animation-duration 和 animation-delay 實(shí)現(xiàn)隨機(jī)動(dòng)畫(huà)效果[3]。
好，我們把上述介紹的技巧，套用到我們本文要實(shí)現(xiàn)的效果中去，HTML 結(jié)構(gòu)再看一眼：
<div class="g-wrap">
<div class="g-footer">
<div class="g-bubble"></div>
<div class="g-bubble"></div>
// ... 200 個(gè) g-bubble
</div>
</div>
核心的 CSS 代碼：
.g-footer {
position: absolute;
bottom: 0;
left: 0;
height: 86px;
width: 100%;
background: #26b4f5;
}
@for $i from 0 through 200 {
.g-bubble:nth-child(#{$i}) {
position: absolute;
background: #26b4f5;
$width: random(100) + px;
left: #{(random(100)) + '%'};
top: #{(random(100))}px;
width: $width;
height: $width;
animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite;
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
100% {
opacity: .08;
transform: translate(-50%, -180px) scale(.3);
}
}
這里：
- 我們利用了 SASS 隨機(jī)函數(shù)$width: random(100) + px;，隨機(jī)生成不同大小的 div 圓形。
- 利用 SASS 隨機(jī)函數(shù)left: #{(random(100)) + '%'}，top: #{(random(100))}px 基于父元素隨機(jī)定位。
- 最為核心的是animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，讓所有 div 圓的運(yùn)動(dòng)都是隨機(jī)的。
上述（1）、（2）綜合結(jié)果，會(huì)生成這樣一種布局，均勻分散排布的圓形：
注：這里為了方便理解，我隱藏了最外層 g-footer 的顏色，并且給 g-bubble 添加了黑色邊框。
接著，如果我們替換一下 animation 語(yǔ)句，使用統(tǒng)一的動(dòng)畫(huà)時(shí)長(zhǎng)，去掉負(fù)的延遲，變成 animation: moveToTop 4s ease-in-out infinite，動(dòng)畫(huà)就會(huì)是這樣：
整體是整齊劃一，沒(méi)有雜亂無(wú)章的感覺(jué)的。
運(yùn)用上隨機(jī)效果，animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，就能得到上述的，不同氣泡隨機(jī)上升的感覺(jué)：
添加融合效果
接下來(lái)，也是最重要的一步，如何讓氣泡與氣泡之間，以及氣泡和底部 .g-footer 之間產(chǎn)生融合效果呢？
這個(gè)技巧在此前非常多篇文章中，也頻繁提及過(guò)，就是利用 filter: contrast() 濾鏡與 filter: blur() 濾鏡。
如果你還不了解這個(gè)技巧，可以戳我的這篇文章看看：你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)[4]。?
簡(jiǎn)述下該技巧：
單獨(dú)將兩個(gè)濾鏡拿出來(lái)，它們的作用分別是：
- filter: blur()：給圖像設(shè)置高斯模糊效果。
- filter: contrast()：調(diào)整圖像的對(duì)比度。
但是，當(dāng)他們“合體”的時(shí)候，產(chǎn)生了奇妙的融合現(xiàn)象。
仔細(xì)看兩圓相交的過(guò)程，在邊與邊接觸的時(shí)候，會(huì)產(chǎn)生一種邊界融合的效果，通過(guò)對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實(shí)現(xiàn)融合效果。
基于此，我們?cè)俸?jiǎn)單改造下我們的 CSS 代碼，所需要加的代碼量非常少：
.g-wrap {
background: #fff;
filter: contrast(8);
}
.g-footer {
// ... 其他保持一致
filter: blur(5px);
}
就這么簡(jiǎn)單，父容器添加白色底色以及對(duì)比度濾鏡 filter: contrast(8)，子容器添加 filter: blur(5px) 即可，這樣，我們就能得氣泡的融合效果，基本得到我們想要的效果：
利用 backdrop-filter 替代 filter 消除邊緣
但是！利用 filter: blur() 會(huì)有一個(gè)小問(wèn)題。
運(yùn)用了 filter: blur() 的元素，元素邊緣的模糊度不夠，會(huì)導(dǎo)致效果在邊緣失真，我們仔細(xì)看看動(dòng)畫(huà)的邊緣：
如何解決呢？也好辦，在這里，我們嘗試?yán)?nbsp;backdrop-filter 去替換 filter。
兩者之間的差異在于，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的區(qū)域所覆蓋的所有元素，如果你想了解更多關(guān)于 backdrop-filter 的信息，可以戳我的這篇文章：深入探討 filter 與 backdrop-filter 的異同[5]。
簡(jiǎn)單改造下代碼，原代碼：
.g-footer {
// ...
filter: blur(5px);
}
改造后的代碼：
.g-footer {
// ... 去掉 filter: blur(5px)
&:before {
content: "";
position: absolute;
top: -300px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
backdrop-filter: blur(5px);
}
}
我們通過(guò)去到原來(lái)添加在 .g-footer 上的 filter: blur(5px)，通過(guò)他的偽元素，疊加一層新的元素在它本身之上，并且添加了替代的 backdrop-filter: blur(5px)。
當(dāng)然，因?yàn)檫@里的 blur(5px) 還需要為氣泡與氣泡之間的融合服務(wù)，所以為了覆蓋動(dòng)畫(huà)全區(qū)域，我們還設(shè)置了 top: -300px，擴(kuò)大了它的作用范圍。
最終，我們就能完美的復(fù)刻文章一開(kāi)頭，使用 SVG 濾鏡實(shí)現(xiàn)的效果：
在文章中，我省去了大部分基礎(chǔ)的 CSS 代碼，完整的代碼，你可以戳這里：CodePen Demo -- Bubble Rises[6]。
最后
本文與之前的 巧用 CSS 實(shí)現(xiàn)酷炫的充電動(dòng)畫(huà)[7] 內(nèi)使用的技巧非常類(lèi)似，但本文也有一些新的知識(shí)點(diǎn)，大家可以結(jié)合著一起看看。
好了，本文到此結(jié)束，希望對(duì)你有幫助 :)
參考資料
[1]CodePen Demo -- Goey footer: https://codepen.io/z-/pen/zYxdRQy。
[2]深入淺出 CSS 動(dòng)畫(huà): https://github.com/chokcoco/iCSS/issues/141。
[3]CodePen Demo -- 利用范圍隨機(jī) animation-duration 和 animation-delay 實(shí)現(xiàn)隨機(jī)動(dòng)畫(huà)效果: https://codepen.io/Chokcoco/pen/JjyRYyR。
[4]你所不知道的 CSS 濾鏡技巧與細(xì)節(jié): https://github.com/chokcoco/iCSS/issues/30。
[5]深入探討 filter 與 backdrop-filter 的異同: https://github.com/chokcoco/iCSS/issues/147。
[6]CodePen Demo -- Bubble Rises: https://codepen.io/Chokcoco/pen/QWQRjrX。
[7]巧用 CSS 實(shí)現(xiàn)酷炫的充電動(dòng)畫(huà): https://github.com/chokcoco/iCSS/issues/75。
