使用 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
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類