漲姿勢了，有意思的氣泡 Loading 效果

来源:https://www.cnblogs.com/coco1s/archive/2023/04/13/17312405.html
-Advertisement-
Play Games

今日，群友提問，如何實現這麼一個 Loading 效果： 這個確實有點意思，但是這是 CSS 能夠完成的？ 沒錯，這個效果中的核心氣泡效果，其實藉助 CSS 中的濾鏡，能夠比較輕鬆的實現，就是所需的元素可能多點。參考我們之前的： 使用純 CSS 實現超酷炫的粘性氣泡效果 巧用 CSS 實現酷炫的充電 ...


今日，群友提問，如何實現這麼一個 Loading 效果：

這個確實有點意思，但是這是 CSS 能夠完成的？

沒錯，這個效果中的核心氣泡效果，其實藉助 CSS 中的濾鏡，能夠比較輕鬆的實現，就是所需的元素可能多點。參考我們之前的：

圓弧的實現

首先，我們可能需要實現這樣一段圓弧：

這裡需要用到的技術是：

角向漸變 conic-gradient() + mask 以及兩個偽元素。圖片示意如下：

核心代碼如下圖：

<div class="g-container">
  <div class="g-circle"></div>
</div>

:root {
    --headColor: hsl(130, 75%, 75%);
    --endColor: hsl(60, 75%, 40%);
}
.g-container {
    position: relative;
    background: #000;
}
.g-circle {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: conic-gradient(
        var(--headColor) 0, 
        var(--headColor) 10%,
        hsl(120, 75%, 70%), 
        hsl(110, 75%, 65%), 
        hsl(100, 75%, 60%),
        hsl(90, 75%, 55%), 
        hsl(80, 75%, 50%),
        hsl(70, 75%, 45%),
        var(--endColor) 30%,
        var(--endColor) 35%,
        transparent 35%
    );
    mask: radial-gradient(transparent, transparent 119px, #000 120px, #000 120px, #000 100%);
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        width: 30px;
        height: 30px;
        background: var(--headColor);
        top: 0;
        left: 135px;
        border-radius: 50%;
    }
    
    &::after {
        background: var(--endColor);
        left: unset;
        top: 214px;
        right: 26px;
    }
}

這樣，我們就得到了這樣一個圖形：

氣泡的實現

接下來，我們來實現尾部氣泡向外擴散的效果。

由於這裡涉及了多個氣泡的不同運動動畫，多個標簽元素肯定是少不了了。

因此，接下來我們要做的事情：

  1. 我們需要多一組元素，將其絕對定位到上述圓環的頭部或者尾部
  2. 給每個子元素隨機設置多個大小不一的圓，顏色保持一致
  3. 給每個子元素隨機設置不同方向的，向外擴散的位移動畫
  4. 給每個子元素隨機設置負的 animation-delay，造成動畫上的先後順序，並以此形成整個無限迴圈的氣泡擴散動畫

這裡，由於有許多小氣泡的動畫，這個數量，我設置成了 100。那肯定是不能一個一個手寫它們的動畫代碼，需要藉助 SASS/LESS 等預處理器的迴圈、隨機等函數。

核心代碼如下：

<div class="g-container">
  <div class="g-circle"></div>
  <ul class="g-bubbles">
    <li class="g-bubble"></li>
    // ... 共 100 個 bubble 元素 
    <li class="g-bubble"></li>
  </ul>
</div>

// 上面圓環的代碼，保持一致，下麵只補充氣泡動畫的代碼
.g-bubbles {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    top: 100px;
    left: 235px;
    background: var(--headColor);
}

.g-bubble {
    position: absolute;
    border-radius: 50%;
    background-color: inherit;
}

@for $i from 1 through 100 { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{random(360)} * 1deg);
        --dis: calc(#{random(100)} * 1px);
        --width: calc(3px + #{random(25)} * 1px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: var(--width);
        height: var(--width);
        animation: move #{(random(1500) + 1500) / 1000}s ease-in-out -#{random(3000) / 1000}s infinite;
    }
}

@keyframes move {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    75% {
        opacity: .9;
    }
    100% {
        transform: rotateZ(var(--rotate)) translate(-50%, var(--dis));
        opacity: .4;
    }
}

核心在於 @for $i from 1 through 100 { } 這段 SASS 代碼內部，我們實現了上面說的 (2)(3)(4) 的功能點！

這樣，我們就得到了這樣一個效果，在尾部有大量氣泡動畫，不斷向外擴散的效果：

藉助濾鏡實現粘性氣泡效果

OK，到這裡整個效果基本就做完了。當然，也是剩下最後最重要的一步，需要讓多個氣泡之間產生一種粘性融合的效果。

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

如果你還不瞭解這個技巧，可以戳我的這篇文章看看：你所不知道的 CSS 濾鏡技巧與細節

簡述下該技巧：

單獨將兩個濾鏡拿出來，它們的作用分別是：

  1. filter: blur()： 給圖像設置高斯模糊效果。
  2. filter: contrast()： 調整圖像的對比度。

但是，當他們“合體”的時候，產生了奇妙的融合現象。

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產生一種邊界融合的效果，通過對比度濾鏡把高斯模糊的模糊邊緣給幹掉，利用高斯模糊實現融合效果。

基於此，我們再簡單改造下我們的 CSS 代碼，所需要加的代碼量非常少：

  1. 加上濾鏡 blur() 和 contrast() ，形成融合粘性效果
  2. 加上整個圓環的旋轉即可效果
  3. 加上濾鏡 hue-rotate()，實現色彩的變換動畫
.g-container {
    // ... 保持一致
    background: #000;
    filter: blur(3px) contrast(5);
    animation: rotate 4s infinite linear;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
        filter: blur(3px) contrast(5) hue-rotate(360deg);
    }
}

就這樣，我們就大致還原了題圖的效果：

完整的代碼，你可以戳這裡：CodePen Demo -- Pure CSS Loading Animation

修複違和感

當然，上面的效果，乍一看還行，仔細看，違和感很重。

原因在於，擴散出來的小球也跟著半圓環一起進行了旋轉動畫，看上去就有點奇怪。

正確的做法應該是，圓環尾部的氣泡應該是原地發散消失的。

那麼，怎麼能夠做到氣泡效果，一直發生在圓環的尾部，同時消失的時候又不跟著整個圓環一起進行旋轉呢？我們想要的最終效果，應該是這樣：

這裡，我們可以拆解一下。想象，如果去掉圓環的旋轉，其實我們只需要實現這樣一個效果即可：

整個動畫的核心就轉變成瞭如何實現這麼一個效果。看似複雜，其實也很好做。

首先，我們重新改造一下上述的 .g-bubbles。

  1. 生成 N 個一樣大小的小球元素，定位在整個容器的中間
<div class="g-container">
  <div class="g-circle"></div>
  <ul class="g-bubbles">
    <li class="g-bubble"></li>
    // ... 共 200 個 bubble 元素 
    <li class="g-bubble"></li>
  </ul>
</div>

.g-bubbles {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    border-radius: 50px;
}
.g-bubble {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: hsl(60, 75%, 40%);
}

得到這麼一個效果，所有圓形小點，都暫時匯聚在容器的中心：

這裡需要簡單解釋一下：

其次，我們藉助 SASS，按照元素的順序，把它們順序排列到圓環軌跡之上：

$count: 200;
@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
    }
}

由於我們設置了 div 小球的個數為 200 個，這樣，我們就得到了一圈由 200 個圓形小球形成的圓環：

接下來這一步非常重要，我們設定一個動畫：

  1. 讓每個小球在動畫的 75% ~ 100% 階段做透明度從 1 到 0 的變換，而 0% ~ 75% 的階段保持透明度為 0
  2. 讓 200 個 div 依次進行這個動畫效果（利用負的 animation-delay，從 -0 到 -4000ms），整體上就能形成逐漸消失的效果
@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        --delayTime: calc(4000 * #{$i / $count} * -1ms);
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
        animation: showAndHide 4000ms linear var(--delayTime) infinite;
    }
}
@keyframes showAndHide {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    75.1% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

這樣，我們就得到了一個圓形小球氣泡圍繞圓環漸次消失的效果：

配合上整個圓環，效果就會是這樣：

很接近了，但是沒有隨機的感覺，氣泡也沒有散開的動畫。解決的方案：

  1. 所以我們需要讓氣泡在執行透明度變化的同時，進行一個隨機的發散位移
  2. 小圓形氣泡的大小也可以帶上一點隨機，同時，在動畫過程逐漸縮小

當然，整個動畫的基礎，還是在容器設置了 濾鏡 blur() 和 contrast() 的加持之下的，這樣，我們給氣泡再補上隨機動畫散開及縮放的動畫：

@for $i from 1 through $count { 
    .g-bubble:nth-child(#{$i}) {
        --rotate: calc(#{360 / $count} * #{$i} * 1deg);
        --delayTime: calc(4000 * #{$i / $count} * -1ms);
        --scale: #{0.4 + random(10) / 10};
        --x: #{-100 + random(200)}px;
        --y: #{-100 + random(200)}px;
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 1;
        animation: showAndHide 4000ms linear var(--delayTime) infinite;
    }
}

@keyframes showAndHide {
    0% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0);
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    75.1% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(135px, 0)
            scale(var(--scale));
        opacity: 1;
    }
    100% {
        transform: 
            rotateZ(var(--rotate)) 
            translate(calc(135px + var(--x)), var(--y))
            scale(.2);
        opacity: 0;
    }
}

只看一圈的氣泡圓形，我們能得到了這樣的效果：

配合上圓環的效果：

配合上父容器的 filter: hue-rotate() 動畫，就能實現顏色的動態變換，得到我們最終想要的效果：

這樣，沒有了第一版本的違和感，整個效果也顯得比較自然。

完整的代碼，你可以戳這裡：CodePen Demo -- Pure CSS Loading Animation

最後

好了，本文到此結束，希望對你有幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 關於react的Tabs組件中TabPane的bug
    今天解決了我自認為一個很不起眼的Bug。 我的Tabs下麵有5個tabPane，並且這幾個tabPane共用了一個search組件，今天遇到了一個bug，就是這幾個組件使用公共查找組件的時候，前一個組件的值會影響下一個組件的值。 找了半天發現，原來我應該在父組件Tabs中定義一個useState的狀 ...
  • 分析web應用內引用依賴的占比
    項目忙完，這次上新，寫一個前端系列，採用vue3來開發一個微信公眾號商城。 前言： 1. 微信公眾號商城本質也是一個網站，由一個個網頁組成，只不過這些網頁運行在手機端，能響應手指的點擊、長按、拖拽等操作。 2. 既然是網頁，當然可以用3件套（js+html+css）來寫，但象vue這樣的前端框架比3 ...
  • 記錄-記一次不規範使用key引發的慘案
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 平時在使用v-for的時候，一般會要求傳入key，有沒有像我一樣的小伙伴，為了省心，直接傳索引index，貌似也沒有遇到過什麼問題，直到有一天，我遇到一個這樣的需求 場景 在一個下單界面，我需要去商品列表選商品，然後在下單界面遍歷顯 ...
  • 【D02】Bootstrap免費精選模板推薦，附上Django中使用模板教程
    前端模板 - Anchor UI KIT 前言 今天介紹一款製作精良、開源、免費的 Bootstrap 模板 —— Anchor UI KIT 該模板使用的是Bootstrap v4版本 本文將介紹如何在Django中導入該模板的靜態資源包並使用 介紹 官方文檔 Anchor - a free Bo ...
  • 記錄 Promise 的方法
    Promise 是非同步編程的一種解決方案，比傳統的回調函數或事件更合理和更靈活。 Promise 方法 Promise的原型方法：then/catch/finally，這三種方法很常用，then用於處理Promise轉為fulfilled狀態時的代碼，catch用於處理Promise轉為reject ...
  • 由 Base64 展開的知識探討
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。 本文作者：霜序(掘金) 前言 在我們的業務應用中越來越多的應用到編碼內容，例如在 API 中，給到後端的 SQL 都是通過 Base64 加密的數據等等。 能夠發現我 ...
  • 面試題：JS如何最快的執行垃圾回收機制
    因為沒看見答案，所以也不知道對不對。 JavaScript 的垃圾回收機制是由 JavaScript 引擎自動管理的，通常情況下我們無法控制垃圾回收機制的執行時間和頻率。 然而，我們可以採取一些優化策略來減少垃圾回收的性能開銷，從而提高代碼執行速度。 減少全局變數：全局變數不易被垃圾回收，因為它們始 ...
  • Nuxtjs實現服務端渲染和靜態化站點
    本文將介紹如何使用Nuxtjs對vue項目進行ssr和靜態化處理。 Nuxtjs簡單介紹 首先，我們簡單瞭解下Nuxtjs框架，Nuxt.js是一個基於Vue的通用框架，主要用於解決Vue項目的服務端渲染(SSR)。 它本質上是一個Vue框架，增加一層node服務，通過對客戶端/服務端的抽象封裝，使 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類