動畫背景是現代網站的流行特征。它不再是一種趨勢或特殊的東西。這只是現在裝飾英雄區的可行方法之一。盡管瀏覽器兼容性仍存在問題，但該解決方案已成功為自己開辟了一個利基市場。

有不同種類的動畫。你可以歸類為：

• 粒子動畫 ;
• 千變萬化的動畫;
• 摘要3D動畫;
• 平滑的幾何動畫等等。

Uwe Chardon的Blob動畫

Uwe Chardon對這種流行解決方案的看法是實用和鼓舞人心的。它具有簡單，平坦的斑點，美麗的橙色著色和光滑的邊緣放置在干凈的環境中。他設法很好地模仿了液體行為。

結果是簡單的形狀和錯綜復雜的行為的成功組合，看起來非常令人印象深刻。

 

Ashton Holgate的Blob

前面的例子描述了一種傳統的斑點形狀，具有不規則的形狀和相對富有表現力的變形。然而，阿什頓霍爾蓋特的這個項目堅持一個更神圣的形狀，幾乎與圓圈接壤，變化幾乎不明顯。盡管如此，它看起來也很出色。

更重要的是，藝術家也使用了文本，迫使它在碰到泡沫區域時將顏色轉移到相反的顏色。

Fabio Ottaviani彈跳液體裝載機

Fabio Ottaviani已經實踐了blob動畫固有的粘糊糊行為的俏皮本質。他的泡泡很小，但它可愛的變形和有趣的彈跳產生了相當大的影響。

雖然筆項目的銘牌上寫著“Loader”，但它可以很容易地變成背景的裝飾細節。要做到這一點，您需要知道的是HTML和CSS，因為藝術家根本不使用任何JavaScript魔法。聰明。

Shaw的Canvas Blob測試

與前面的示例不同，此drop完全由JavaScript生成。因此，請準備好深入了解令人興奮的解決方案和復雜的圖形播放。更重要的是，這個概念與其他概念不同，具有原始的外觀，以及非常平穩和平靜的行為，帶來整體寧靜的氛圍。

它非常普遍和中立。因此，它可以成為眾多項目的完美背景動畫。

杰弗里的Blob

Jeffrey的這個解決方案是兩種趨勢的成功組合。在這里，您可以找到這些日子非常受歡迎的斑點背景以及流行于其他選項的流動行為。

代碼段由HTML，CSS和JavaScript組成。它在各種瀏覽器和設備中看起來一致。藝術家使用基本的彈簧算法，使與巨大的斑點的交互感覺真實和非人為。

請注意，即使blob占據場景的一半，也不會壓倒旁觀者。平穩，平靜的行為支持著這種不引人注目的行為。

Blob by Charlotte Dann

如果一個斑點不足以產生適當的印象，那么你總是可以去打十幾個斑點。Charlotte Dann憑借其巧妙的代碼片段，將向您展示如何在不破壞一般效果和壓倒性訪客的情況下實現這一目標。

她的代碼片段只是一種享受。它具有許多相互作用的小移動blob。每個人看起來像一個小光點。它們共同形成了一個巨大的斑點，散發著各方面的溫暖。

現在，讓我們從扁平世界轉變為三維世界。

Blob by Georgi Nikoloff

Georgi Nikoloff的Blob是一個案例。它立即以其鮮艷的色彩，高科技外觀和動態行為引人注目。開發人員充分利用先進技術，使用WebGL，GLSL和著色器。即使該解決方案受瀏覽器兼容性的影響，它看起來也很有啟發性。

Daniel Del Core的實驗＃6

Daniel Del Core向在線觀眾展示了如何使用Simplex噪音并使用一些警惕再現的紋理來修飾它。結果是一個糖果般的油漆狀球。雖然移動速度非常快，但令人著迷的是，很難立刻將它從眼睛上移開。

Eli Fitch的假粒子斑點

與上一個具有大膽個性和魅力四射的彈力明星的魅力不同的例子不同，這個感覺就像是來自溫和的技術未來。斑點由微小顆粒構成，在某些角度下變得更亮，以實現3D外觀。

可以預見的是，藝術家使用Three.js魔術和一些巧妙的程序紋理工作來實現這一概念。

Edwin Chen的CSS Blob Generator

我們將用Edwin Chen的CSS Blob Generator結束我們的收藏。正如標題所述，這支筆有一個小型游樂場，您可以在其中創建一個blob形狀。

在這里，您將找到一個小面板，您可以在其中為每個邊框指定半徑。雖然它是靜態和平面的，但您可以輕松地復制結果并在JavaScript的幫助下將其設置為運動。

平靜氛圍的完美造型

毫不以外，液體特效的平穩和平靜的性質如今越來越受歡迎。就像穿過森林的迷人小溪一樣，它吸引著你，在不斷變化的網絡世界中成為一個寧靜的島嶼。

基于blob的動畫只是為了使現代項目受益。他們不引人注目，即使他們肯定會引起注意。無論您是追求優雅，平坦的實現還是奢華的3D，它都能輕松營造出平靜的氛圍。