CSS3怎么實(shí)現(xiàn)超酷炫的粘性氣泡效果

今天小編給大家分享一下CSS3怎么實(shí)現(xiàn)超酷炫的粘性氣泡效果的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

霸州網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,霸州網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為霸州上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的霸州做網(wǎng)站的公司定做！

借助 SASS 完成大致效果

首先，如果上述效果沒有氣泡的融合效果，可能就僅僅是這樣：

要制作這樣一個(gè)效果還是比較簡單的，只是代碼會(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 從底部無規(guī)律的進(jìn)行向上升起的動(dòng)畫。

這里，就需要運(yùn)用一種技巧 -- 利用 animation-duration 和 animation-delay 構(gòu)建隨機(jī)效果。

利用 animation-duration 和 animation-delay 構(gòu)建隨機(jī)效果

同一個(gè)動(dòng)畫，我們利用一定范圍內(nèi)隨機(jī)的 animation-duration 和一定范圍內(nèi)隨機(jī)的 animation-delay，可以有效的構(gòu)建更為隨機(jī)的動(dòng)畫效果，讓動(dòng)畫更加的自然。

我們來模擬一下，如果是使用 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ì)出現(xiàn)重復(fù)的畫面，很好的模擬了隨機(jī)效果：

CodePen Demo -- 利用范圍隨機(jī) animation-duration 和 animation-delay 實(shí)現(xiàn)隨機(jī)動(dòng)畫效果

好，我們把上述介紹的技巧，套用到我們本文要實(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 語句，使用統(tǒng)一的動(dòng)畫時(shí)長，去掉負(fù)的延遲，變成 animation: moveToTop 4s ease-in-out infinite，動(dòng)畫就會(huì)是這樣：

整體是整齊劃一，沒有雜亂無章的感覺的。

運(yùn)用上隨機(jī)效果，animation: moveToTop #{(random(2500) + 1500) / 1000}s ease-in-out -#{random(5000)/1000}s infinite，就能得到上述的，不同氣泡隨機(jī)上升的感覺：

添加融合效果

接下來，也是最重要的一步，如何讓氣泡與氣泡之間，以及氣泡和底部 .g-footer 之間產(chǎn)生融合效果呢？

這個(gè)技巧在此前非常多篇文章中，也頻繁提及過，就是利用 filter: contrast() 濾鏡與 filter: blur() 濾鏡。

如果你還不了解這個(gè)技巧，可以戳我的這篇文章看看：你所不知道的 CSS 濾鏡技巧與細(xì)節(jié)

簡述下該技巧：

單獨(dú)將兩個(gè)濾鏡拿出來，它們的作用分別是：

• filter: blur()： 給圖像設(shè)置高斯模糊效果。

• filter: contrast()： 調(diào)整圖像的對(duì)比度。

但是，當(dāng)他們“合體”的時(shí)候，產(chǎn)生了奇妙的融合現(xiàn)象。

仔細(xì)看兩圓相交的過程，在邊與邊接觸的時(shí)候，會(huì)產(chǎn)生一種邊界融合的效果，通過對(duì)比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實(shí)現(xiàn)融合效果。

基于此，我們?cè)俸唵胃脑煜挛覀兊?CSS 代碼，所需要加的代碼量非常少：

.g-wrap {
    background: #fff;
    filter: contrast(8);
}
.g-footer {
    // ... 其他保持一致
    filter: blur(5px);
}

就這么簡單，父容器添加白色底色以及對(duì)比度濾鏡 filter: contrast(8)，子容器添加 filter: blur(5px) 即可，這樣，我們就能得氣泡的融合效果，基本得到我們想要的效果：

利用 backdrop-filter 替代 filter 消除邊緣

但是！利用 filter: blur() 會(huì)有一個(gè)小問題。

運(yùn)用了 filter: blur() 的元素，元素邊緣的模糊度不夠，會(huì)導(dǎo)致效果在邊緣失真，我們仔細(xì)看看動(dòng)畫的邊緣：

如何解決呢？也好辦，在這里，我們嘗試?yán)?backdrop-filter 去替換 filter。

兩者之間的差異在于，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的區(qū)域所覆蓋的所有元素。

簡單改造下代碼，原代碼：

.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);
    }
}

我們通過去到原來添加在 .g-footer 上的 filter: blur(5px)，通過他的偽元素，疊加一層新的元素在它本身之上，并且添加了替代的 backdrop-filter: blur(5px)。

當(dāng)然，因?yàn)檫@里的 blur(5px) 還需要為氣泡與氣泡之間的融合服務(wù)，所以為了覆蓋動(dòng)畫全區(qū)域，我們還設(shè)置了 top: -300px，擴(kuò)大了它的作用范圍。

最終，我們就能完美的復(fù)刻文章一開頭，使用 SVG 濾鏡實(shí)現(xiàn)的效果：

以上就是“CSS3怎么實(shí)現(xiàn)超酷炫的粘性氣泡效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：CSS3怎么實(shí)現(xiàn)超酷炫的粘性氣泡效果
文章網(wǎng)址：http://muchs.cn/article44/gddohe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、做網(wǎng)站、Google、響應(yīng)式網(wǎng)站、微信公眾號(hào)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)