动画背景是现代网站的流行特征。它不再是一种趋势或特殊的东西。这只是现在装饰英雄区的可行方法之一。尽管浏览器兼容性仍存在问题，但该解决方案已成功为自己开辟了一个利基市场。

有不同种类的动画。你可以归类为：

• 粒子动画 ;
• 千变万化的动画;
• 摘要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，它都能轻松营造出平静的氛围。