使用 CSS 構建強大且酷炫的粒子動畫

来源:https://www.cnblogs.com/coco1s/archive/2022/08/08/16561206.html
-Advertisement-
Play Games

粒子動畫，顧名思義，就是頁面上存在大量的粒子構建而成的動畫。傳統的粒子動畫主要由 Canvas、WebGL 實現。 當然，不使用 HTML + CSS 的主要原因在於，粒子動畫通常需要較多的粒子，而如果使用 HTML + CSS 的話勢必需要過多的 DOM 元素，這也就導致了使用 HTML + CS ...


粒子動畫，顧名思義，就是頁面上存在大量的粒子構建而成的動畫。傳統的粒子動畫主要由 Canvas、WebGL 實現。

當然，不使用 HTML + CSS 的主要原因在於，粒子動畫通常需要較多的粒子，而如果使用 HTML + CSS 的話勢必需要過多的 DOM 元素，這也就導致了使用 HTML + CSS 構建的粒子動畫在性能上毫無優勢。

當然，如果僅僅是從效果的角度而言，使用 CSS 構建的粒子動畫一樣可以做到非常的令人震撼。

本文，將嘗試利用 CSS 來構建粒子動畫。

工欲善其事必先利其器

OK，繪製 CSS 粒子動畫首先需要有好的工具。本文將會繼續藉助 CSS-Doodle 完成所有的功能。但是請註意，CSS-Doodle 你可以理解為一個語法糖庫，使用它完成的所有效果，都可以用 CSS + HTML（也許有一些會加上一點 SVG）復現。

簡單而言，CSS-doodle 它是一個基於 Web-Component 的庫。允許我們快速的創建基於 CSS Grid 佈局的頁面，並且提供各種便捷的指令及函數（隨機、迴圈等等），讓我們能通過一套規則，得到不同 CSS 效果。可以簡單看看它的主頁 -- Home Page of CSS-doodle，只需要 5min 也許就能快速上手。

使用 CSS-Doodle 構建粒子

要實現粒子動畫，那麼第一步，我們需要得到大量的粒子。使用 CSS 實現的話，也就是我們需要大量的 DOM。

藉助，CSS-Doodle 的 Grid 佈局語法，我們可以快速得到大量的 DOM，當然方式有非常多。

現在我們假設我們需要 10000 個粒子，我們只需要實現一個 100x100 的 Grid 佈局即可，使用 CSS-Doodle 的話，語法如下：

<css-doodle grid="100x100">
    :doodle {
        @size: 100vw 100vmin;
    }
    
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: #000;
    border-radius: 50%;
</css-doodle>

簡單解釋下上面的代碼：

  1. grid="100x100" 表示實現一個 100x100 的 Grid 佈局
  2. @size: 100vw 100vmin 表示 Grid 佈局的高寬分別為 100vw 和 100vh，也就是占滿整個屏幕
  3. 剩下的代碼比較好理解，它會賦值給每一個 Grid item，相當於 10000 個 Grid item 都是一個 2x2 的圓球，並且定位在頁面中間

整個效果如下：

你沒有看錯，因為所有的粒子都疊在一個點了，所以確實只有一個點。

至此，我們就得到了 10000 個聚集在一起的粒子。

實現 2D 粒子效果

有了 10000 個聚集在一起的粒子，我們給每個粒子添加任意不同的屬性，就可以得到各種不同的粒子效果了。

為了讓粒子看得清，第一步，我們讓粒子散開，這裡只需要改變上面代碼中的 top、left 定位即可（利用 transform 也可以）：

<css-doodle grid="100x100">
    // ...其他與上述保持一致
    top: @r(1%, 100%);
    left: @r(1%, 100%);
    // ...其他與上述保持一致
</css-doodle>

CSS-Doodle 中，@r() 方法可以用於獲取隨機數，這裡就是表示獲取 1% ~ 100% 內的隨機數

這裡，我們做的事情只是讓每一個粒子的 top、left 隨機落在 1% ~ 100%，這樣我們就能看清不同的粒子分佈了：

好吧，到這裡，美感還沒體現出來。

彆著急，我們嘗試隨機放大縮小每個粒子，並且，給它們賦予不同的顏色：

<css-doodle grid="100x100">
    // ...其他與上述保持一致
    background: hsl(@r(1, 255, 3), @r(10%, 90%), @r(10%, 90%));
    transform: scale(@rn(.1, 5, 3));
</css-doodle>

這樣，我們的粒子就變成了這樣：

好，看著像那麼回事了。當然，粒子動畫怎麼能少了動畫，接下來的一步，我們需要讓粒子動起來，由於動畫需要用到 transform: translate()，但是我們上面又用到了 scale()，為了減少代碼量，這裡我會把縮放的操作交給 zoom 屬性來實現，這樣一來，完整的代碼如下：

<css-doodle grid="100x100">
    :doodle {
        @size: 100vw 100vmin;
        perspective: 10px;
    }
    
    position: absolute;
    top: @r(1%, 100%);
    left: @r(1%, 100%);
    width: 2px;
    height: 2px;
    background: #000;
    border-radius: 50%;
    background: hsl(@r(1, 255, 3), @r(10%, 90%), @r(10%, 90%));
    transform: rotate(@r(360deg)) translate(@r(-50, 50)vmin, @r(-50, 50)vmin);
    animation: move 3s infinite linear alternate;
    zoom: @rn(.1, 5, 3);
    @keyframes move {
        100% {
            transform: rotate(0) translate(0, 0);
        }
    }
</css-doodle>

效果如下：

看著還挺不錯，但是由於所有粒子的動畫時間都是一樣的，所以動畫起始幀和結束幀非常明顯，我們再改造下 animation：

<css-doodle grid="100x100">
  - animation: move 3s infinite linear alternate;
  + animation: move @r(5, 15)s infinite @r(-10, 0)s @p(linear, ease-in, ease-in-out) alternate;
</css-doodle>

這樣，動畫時間，負延遲時間（提前開始），以及動畫緩動都設置成了對每個粒子都隨機，這樣，整體效果將會好上不少，不會出現明顯的停頓或者破綻：

完整的代碼，你可以戳這裡：CSS Doodle - CSS Pattern Effect

當然，我們完全可以換一個配色，黑色底色配合上 box-shadow()，讓每一個元素髮光發亮，這樣，我們就得到了這樣一個效果：

完整的代碼，你可以戳這裡：CSS Doodle - CSS Pattern Effect

柏林雜訊配合 3D 實現粒子動效

還記得我們在 利用雜訊構建美妙的 CSS 圖形 一文中提到柏林雜訊嗎？

柏林雜訊基於隨機，併在此基礎上利用緩動曲線進行平滑插值，使得最終得到雜訊效果更加趨於自然。

它的作用在於，讓我們產生的隨機是不是完全隨機的，而是能夠像木頭紋理、山脈起伏的變化般，存在一定的規律性！

基於柏林雜訊，我們再在 2D 粒子動畫的基礎上，引入 CSS 3D，實現 3D 粒子動效。

我們來看看，此時，我們不再隨機定位每一個粒子，而是利用柏林雜訊去分佈我們的粒子：

是的，在 CSS Doodle 中，我們使用 @rn() 替代 @r()，即可讓隨機的結果基於 Grid item 的位置關係產生關聯。

<css-doodle grid="100x100">
    :doodle {
        @size: 100vw 100vmin;
        perspective: 10px;
    }
    :container {
        perspective: 100px;
        transform-style: preserve-3d;
    }
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
    transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
</css-doodle>

我們在 3D 場景下，利用柏林雜訊佈局我們的粒子系統，讓它們相鄰之間的顏色，定位都是存在一定的關聯性。本身，每一次隨機，都是一副美妙的畫作，感受下：

當然，這還沒完，我們要讓它們動起來。添加什麼好呢？其實加什麼都非常 NICE，這裡，我們嘗試讓他們有規律的上下律動，當然，也需要用到柏林雜訊，這樣完整的代碼就會變成：

<css-doodle grid="100x100">
    :doodle {
        @size: 100vw 100vmin;
        perspective: 10px;
    }
    :container {
        perspective: 50px;
        transform-style: preserve-3d;
    }
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    background: hsl(@rn(1, 255, 3), @rn(50%, 90%), @rn(50%, 90%));
    transform: scale(@rn(1, 10, 3)) translate3d(@rn(-50, 50, 3)vw, @rn(-50, 50, 3)vh, @rn(-100, 20)px);
    animation: move @rn(5, 15, 3)s infinite @rn(-20, -10, 3)s linear alternate;
    box-shadow: 0 0 1px #fff, 0 0 5px #fff;
    @keyframes move {
        100% {
            margin-top: 500px;
        }
    }
</css-doodle>

OK，會是什麼樣一副景象呢？讓我們來看看：

可以看到，利用柏林雜訊生成的粒子效果，更加的真實，看上去更加的帶感。

完整的代碼，你可以戳這裡：CSS Doodle - CSS Pattern Effect

當然，掌握了這個技巧之後，我們可以嘗試其他添加其他屬性的動畫，那麼可能我們會得到這樣的動畫：

完整的代碼，你可以戳這裡：CSS Doodle - CSS Pattern Effect

亦或，我們嘗試實現另外一種時空穿梭的感覺：

<css-doodle grid="30x30">
    :doodle {
        @size: 100vw 100vmin;
    }
    :container {
        perspective: 500px;
        transform-style: preserve-3d;
        transform: rotate3d(@r(-1.5, 1.5), @r(-1.5, 1.5), @r(-1.5, 1.5), @r(0, 30)deg);
    }
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    top: @r(50, 50)%;
    left: @r(50, 50)%;
    background: hsl(@rn(160, 170, 3), @r(90%, 99%), @rn(50%, 70%));
    animation: move @r(5, 30)s infinite @r(-30, -15)s @p(linear, ease-in, ease-in-out);
    transform: scale(@rn(.1, 1)) rotate(0) translate3d(@r(-60vmin, 60vmin), @r(-60vmin, 60vmin), @r(-1500, -2000)px);
    box-shadow: 
    0 0 0.5px #fff,
    0 0 2px #fff,
    0 0 5px #fff; 
    @keyframes move {
        100% {
            transform: scale(10) rotate(1080deg) translate3d(0, 0, @r(710, 850)px);
        }
    }
</css-doodle>

效果如下：

完整的代碼，你可以戳這裡：CSS Doodle - CSS Pattern Effect

CSS-Doodle 庫的作者，袁川老師，也有非常多 3D 粒子動畫，其中一幅：

完整的代碼 CSS Doodle - Seeding By yuanchuan

其實還有非常多屬性適合添加到整個粒子系統中，本文只是拋磚引玉，只嘗試了 CSS 中很少的屬性。是的，CSS 一樣可以實現這些超酷炫的粒子動效，如果你也心動了，不妨下來自己嘗試下。相信你會喜歡上 CSS。

由於 GIF 圖失真嚴重，強烈建議你點擊 DEMO 中，感受實際效果。

最後

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

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

-Advertisement-
Play Games
更多相關文章
  • 小結event.target與this
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1 { width: 200px; height: 200px; background-color: bl ...
  • Vue3系列9--插槽slot
    插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內容會替換子組件的<slot></slot>標簽。 1 匿名插槽 (1) 在子組件放置一個插槽,mytest.vue <template> <di ...
  • Vue生命周期鉤子
    在頁面載入時，主動執行某些程式。 模擬場景：當頁面載入完成之後，像是後臺載入數據 new Vue（）就是初始化一個Vue實例。 Vue實例額生命周期鉤子（函數）：每個Vue實例在被創建時（new Vue）都要經過一系列的初始化過程 例如：created（） 組件初始化完成 mouted() 模板已創 ...
  • Vue計算屬性和監聽器
    計算屬性（computed） date屬性和computed屬性定義的值都可以直接綁定在表達式中，如果某些值需要通過計算才能得到，那使用計算屬性就再合適不過了 如果頁面中需要顯示的值是兩個表達式計算才能得到，並且還有一些比較複雜的邏輯關係，我們寫在頁面上就不太合適了 如果我們直接在頁面上是這樣的： ...
  • SASS 插值語句 #{ }的使用
    在之前我們已經使用用 / 來進行計算，但如下情況不一樣 例如 p{ font: 16px/30px Arial, Helvetica, sans-serif; } 如果需要使用變數，同時又要確保 / 不做除法運算，而是完整地編譯到 CSS 文件中，這種情況怎麼辦？？？可以使用 #{} 插值語句將變數 ...
  • ElementUI table無縫迴圈滾動
    ElementUI table無縫迴圈滾動 恰好實習的時候遇到了這個需求，而且網上的代碼有點僵硬，所以我改了改，順手水一篇博客出來。 部分思路來源：https://blog.csdn.net/qq_38543537/article/details/122842943 但是來源的代碼，在滾動到底部時會 ...
  • Vue組件傳值(父組件使用屬性傳遞給子組件、子組件通過自定義事件傳遞給父組件、同級組件通過共用狀態)
    我們在開發中，會自定義大量的組件，我們應該如何在兩個組件之間進行“值”的傳遞呢？ 父子組件傳值 我們使用上一文中App.vue和HelloComp.vue組件來舉例 首先我們還是需要在APP.vue中引入HelloComp.vue <template> <div id="app"> <hello-c ...
  • vue+xlsx實現表格的導入導出
    前言 前端在開發過程中若是管理系統之類的業務系統，則大多都會涉及到表格的處理，其中最為常見的就是表格的導入導出。有很多辦法都可以實現，其中最簡單的還是使用插件xlsx。 實現目標 1、對錶格數據進行增加、刪除。 2、表格數據的導出、導入。 具體邏輯 增加、刪除功能比較簡單，直接利用vue數據的響應式 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類