使用 CSS 構建強大且酷炫的粒子動畫效果
我要評論粒子動畫，顧名思義，就是頁面上存在大量的粒子構建而成的動畫。傳統(tǒng)的粒子動畫主要由 Canvas、WebGL 實現(xiàn)。
當然，不使用 HTML + CSS 的主要原因在于，粒子動畫通常需要較多的粒子，而如果使用 HTML + CSS 的話勢必需要過多的 DOM 元素，這也就導致了使用 HTML + CSS 構建的粒子動畫在性能上毫無優(yōu)勢。
當然，如果僅僅是從效果的角度而言，使用 CSS 構建的粒子動畫一樣可以做到非常的令人震撼。
本文，將嘗試利用 CSS 來構建粒子動畫。
工欲善其事必先利其器
OK，繪制 CSS 粒子動畫首先需要有好的工具。本文將會繼續(xù)借助 CSS-Doodle 完成所有的功能。但是請注意，CSS-Doodle 你可以理解為一個語法糖庫，使用它完成的所有效果，都可以用 CSS + HTML（也許有一些會加上一點 SVG）復現(xiàn)。
簡單而言，CSS-doodle 它是一個基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數(shù)（隨機、循環(huán)等等），讓我們能通過一套規(guī)則，得到不同 CSS 效果?？梢院唵慰纯此闹黜?-- Home Page of CSS-doodle，只需要 5min 也許就能快速上手。
使用 CSS-Doodle 構建粒子
要實現(xiàn)粒子動畫，那么第一步，我們需要得到大量的粒子。使用 CSS 實現(xiàn)的話，也就是我們需要大量的 DOM。
借助，CSS-Doodle 的 Grid 布局語法，我們可以快速得到大量的 DOM，當然方式有非常多。
現(xiàn)在我們假設我們需要 10000 個粒子，我們只需要實現(xiàn)一個 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>
簡單解釋下上面的代碼：
grid="100x100"表示實現(xiàn)一個 100x100 的 Grid 布局@size: 100vw 100vmin表示 Grid 布局的高寬分別為 100vw 和 100vh，也就是占滿整個屏幕- 剩下的代碼比較好理解，它會賦值給每一個 Grid item，相當于 10000 個 Grid item 都是一個 2x2 的圓球，并且定位在頁面中間
整個效果如下：
你沒有看錯，因為所有的粒子都疊在一個點了，所以確實只有一個點。
至此，我們就得到了 10000 個聚集在一起的粒子。
實現(xiàn) 2D 粒子效果
有了 10000 個聚集在一起的粒子，我們給每個粒子添加任意不同的屬性，就可以得到各種不同的粒子效果了。
為了讓粒子看得清，第一步，我們讓粒子散開，這里只需要改變上面代碼中的 top、left 定位即可（利用 transform 也可以）：
<css-doodle grid="100x100">
// ...其他與上述保持一致
top: @r(1%, 100%);
left: @r(1%, 100%);
// ...其他與上述保持一致
</css-doodle>
CSS-Doodle 中，@r() 方法可以用于獲取隨機數(shù)，這里就是表示獲取 1% ~ 100% 內(nèi)的隨機數(shù)
這里，我們做的事情只是讓每一個粒子的 top、left 隨機落在 1% ~ 100%，這樣我們就能看清不同的粒子分布了：
好吧，到這里，美感還沒體現(xiàn)出來。
別著急，我們嘗試隨機放大縮小每個粒子，并且，給它們賦予不同的顏色：
<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 屬性來實現(xiàn)，這樣一來，完整的代碼如下：
<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>
這樣，動畫時間，負延遲時間（提前開始），以及動畫緩動都設置成了對每個粒子都隨機，這樣，整體效果將會好上不少，不會出現(xiàn)明顯的停頓或者破綻：
完整的代碼，你可以戳這里：CSS Doodle - CSS Pattern Effect
當然，我們完全可以換一個配色，黑色底色配合上 box-shadow()，讓每一個元素發(fā)光發(fā)亮，這樣，我們就得到了這樣一個效果：
完整的代碼，你可以戳這里：CSS Doodle - CSS Pattern Effect
柏林噪聲配合 3D 實現(xiàn)粒子動效
還記得我們在 利用噪聲構建美妙的 CSS 圖形 一文中提到柏林噪聲嗎？
柏林噪聲基于隨機，并在此基礎上利用緩動曲線進行平滑插值，使得最終得到噪聲效果更加趨于自然。
它的作用在于，讓我們產(chǎn)生的隨機是不是完全隨機的，而是能夠像木頭紋理、山脈起伏的變化般，存在一定的規(guī)律性！
基于柏林噪聲，我們再在 2D 粒子動畫的基礎上，引入 CSS 3D，實現(xiàn) 3D 粒子動效。
我們來看看，此時，我們不再隨機定位每一個粒子，而是利用柏林噪聲去分布我們的粒子：
是的，在 CSS Doodle 中，我們使用 @rn() 替代 @r()，即可讓隨機的結果基于 Grid item 的位置關系產(chǎn)生關聯(lián)。
<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 場景下，利用柏林噪聲布局我們的粒子系統(tǒng)，讓它們相鄰之間的顏色，定位都是存在一定的關聯(lián)性。本身，每一次隨機，都是一副美妙的畫作，感受下：
當然，這還沒完，我們要讓它們動起來。添加什么好呢？其實加什么都非常 NICE，這里，我們嘗試讓他們有規(guī)律的上下律動，當然，也需要用到柏林噪聲，這樣完整的代碼就會變成：
<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
亦或，我們嘗試實現(xiàn)另外一種時空穿梭的感覺：
<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
其實還有非常多屬性適合添加到整個粒子系統(tǒng)中，本文只是拋磚引玉，只嘗試了 CSS 中很少的屬性。是的，CSS 一樣可以實現(xiàn)這些超酷炫的粒子動效，如果你也心動了，不妨下來自己嘗試下。相信你會喜歡上 CSS。
由于 GIF 圖失真嚴重，強烈建議你點擊 DEMO 中，感受實際效果。
到此這篇關于使用 CSS 構建強大且酷炫的粒子動畫效果的文章就介紹到這了,更多相關css粒子動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS使用SVG實現(xiàn)動態(tài)分布的圓環(huán)發(fā)散路徑動畫
這篇文章主要介紹了CSS使用SVG實現(xiàn)動態(tài)分布的圓環(huán)發(fā)散路徑動畫,第一時間看到這個需求想到的就是 SVG 或者 Canvas，但是由于開發(fā)時可能還需要插入其他元素，所以這里還是希2022-10-27
本文主要介紹了利用CSS中的conic-gradient()以及box-shadow模擬出光源陰影效果，從而實現(xiàn)一個充滿高級感的背景光動畫，感興趣的小伙伴可以跟隨小編一起學習一下2021-11-30
能用CSS實現(xiàn)的就不要麻煩JavaScript了
雖然萬物都可以是JavaScript，但某種程度css的運行效率會比JavaScript高，所以筆者認為:能用CSS實現(xiàn)的就不用麻煩JavaScript2021-09-28
2022卡塔爾世界杯正在如火如荼的進行之中，作為“諸神的黃昏”，本屆世界杯備受矚目，足壇巔峰老將c羅，梅西，內(nèi)馬爾也將隨本次世界杯退役，一代人的青春到此結束！本篇我2023-01-04
