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

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

• 粒子動畫 ;
• 千變?nèi)f化的動畫;
• 摘要3D動畫;
• 平滑的幾何動畫等等。

Uwe Chardon的Blob動畫

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

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

 

Ashton Holgate的Blob

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

更重要的是，藝術(shù)家也使用了文本，迫使它在碰到泡沫區(qū)域時將顏色轉(zhuǎn)移到相反的顏色。

Fabio Ottaviani彈跳液體裝載機(jī)

Fabio Ottaviani已經(jīng)實(shí)踐了blob動畫固有的粘糊糊行為的俏皮本質(zhì)。他的泡泡很小，但它可愛的變形和有趣的彈跳產(chǎn)生了相當(dāng)大的影響。

雖然筆項(xiàng)目的銘牌上寫著“Loader”，但它可以很容易地變成背景的裝飾細(xì)節(jié)。要做到這一點(diǎn)，您需要知道的是HTML和CSS，因?yàn)樗囆g(shù)家根本不使用任何JavaScript魔法。聰明。

Shaw的Canvas Blob測試

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

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

杰弗里的Blob

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

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

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

Blob by Charlotte Dann

如果一個斑點(diǎn)不足以產(chǎn)生適當(dāng)?shù)挠∠螅敲茨憧偸强梢匀ゴ蚴畮讉€斑點(diǎn)。Charlotte Dann憑借其巧妙的代碼片段，將向您展示如何在不破壞一般效果和壓倒性訪客的情況下實(shí)現(xiàn)這一目標(biāo)。

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

現(xiàn)在，讓我們從扁平世界轉(zhuǎn)變?yōu)槿S世界。

Blob by Georgi Nikoloff

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

Daniel Del Core的實(shí)驗(yàn)＃6

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

Eli Fitch的假粒子斑點(diǎn)

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

可以預(yù)見的是，藝術(shù)家使用Three.js魔術(shù)和一些巧妙的程序紋理工作來實(shí)現(xiàn)這一概念。

Edwin Chen的CSS Blob Generator

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

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

平靜氛圍的完美造型

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

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