网页设计中基于 Blob 的动画背景的攻击

已发表: 2020-10-26

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

有不同种类的动画。你可以偶然发现：

粒子动画；
万花筒动画；
抽象的 3D 动画；
平滑的几何动画等等。

几年前，受星座启发的粒子动画占据主导地位，而如今，斑点状动画激发了创意团队的头脑。你能做什么？液体行为是不可抗拒的。显示大水滴如何在空间中平稳移动的变形例程很容易赢得在线观众的青睐，并使您的网站处于领先地位。

为了从这种主流技术中受益，我们为您提供了一系列出色的代码片段，它们将为您提供有关如何构建自己的 blob 形动画的提示。您可以使用传统的或全新的工具来做到这一点。现在，让我们为您的下一个项目找到完美的匹配。

Uwe Chardon 的 Blob 动画

Uwe Chardon 对这一流行解决方案的看法既实用又鼓舞人心。它具有简单、扁平的斑点，具有美丽的橙色和光滑的边缘，放置在干净的环境中。他设法很好地模仿了液体的行为。

结果是简单的形状和复杂的行为的成功组合，看起来非常令人印象深刻。

查看 Uwe Chardon 的 Pen Blob 动画纯 CSS

阿什顿·霍尔盖特 (Ashton Holgate) 的 Blob

前面的示例描述了一种具有不规则形状和相对富有表现力的变形的传统斑点。然而，阿什顿霍尔盖特的这个项目坚持了一个更神圣的形状，几乎与圆形接壤，变化几乎不明显。尽管如此，它看起来也很出色。

更重要的是，艺术家还玩弄了文字，当它碰到气泡的区域时，迫使它把颜色变成相反的颜色。

查看 Ashton Holgate 的 Pen Blob

Fabio Ottaviani 的弹跳液体装载机

Fabio Ottaviani 已将 Blob 动画固有的粘性行为的俏皮性付诸实践。他的泡泡很小，但它的可爱变形和有趣的弹跳产生了相当大的影响。

虽然钢笔项目的铭牌上写着“Loader”，但它可以很容易地变成背景的装饰细节。要做到这一点，你只需要知道 HTML 和 CSS，因为艺术家根本不使用任何 JavaScript 魔法。聪明的。

参见 Fabio Ottaviani 的 Pen Bouncing Liquid Loader

Shaw 的画布斑点测试

与前面的示例不同，此 drop 完全由 JavaScript 生成。因此，准备好深入了解令人兴奋的解决方案并使用图形进行复杂的游戏。更重要的是，这个概念与其他概念的不同之处在于它的原始外观，以及相当流畅和平静的行为，带来整体宁静的氛围。

它非常普遍和中立。因此，它可以成为众多项目的完美背景动画。

请参阅 Shaw 的 Pen Canvas Blob 测试

杰弗里的斑点

Jeffrey 的这个解决方案是两种趋势的成功结合。在这里，您可以找到近来非常流行的参差不齐的背景以及优于其他选项的流动性行为。

代码片段由 HTML、CSS 和 JavaScript 组成。它在各种浏览器和设备上看起来都是一致的。艺术家使用基本的弹簧算法，使与巨大斑点的交互感觉真实且非人工。

请注意，即使斑点占据了场景的一半，它也不会压倒旁观者。这种不引人注目的背后是平稳、平静的行为。

查看 Jeffrey 的 Pen Blob

夏洛特丹恩的斑点

如果一个斑点不足以产生正确的印象，那么您总是可以选择十几个。 Charlotte Dann 将用她巧妙的代码片段向您展示如何在不破坏总体效果和压倒访问者的情况下做到这一点。

她的代码片段只是对眼睛的一种享受。它具有许多相互交互的小移动斑点。每一个看起来都像一个小光点。它们一起形成了一个巨大的斑点，在各个方面都散发着温暖。

查看夏洛特·丹恩的笔迹

现在，让我们从平面世界进入 3 维世界。

Georgi Nikoloff 的 Blob

Georgi Nikoloff 的 Blob 就是一个例子。它以其鲜艳的色彩、高科技的外观和动态的行为立即引起了人们的注意。开发人员充分利用先进技术，利用 WebGL、GLSL 和着色器发挥自己的优势。尽管该解决方案受浏览器兼容性的影响，但它看起来很鼓舞人心。

查看 Georgi Nikoloff 的 Pen blob

Daniel Del Core 的实验 #6

Daniel Del Core 向在线观众展示了如何使用 Simplex 噪声，并使用一些谨慎再现的纹理对其进行修饰。结果是一个受糖果启发的油漆状球。虽然它移动得很快，但它是如此迷人，以至于你很难马上将目光从它身上移开。

参见 Daniel Del Core 的钢笔实验 #6

Eli Fitch 的假粒子斑点

与前面的例子不同，它具有大胆的个性和 80 年代迷恋氨纶的流行歌星的魅力，而这个例子感觉就像来自谦虚的 techno 未来。斑点由微小颗粒构成，这些颗粒在某些角度下会变得更亮，以实现 3D 外观。

可以预见的是，这位艺术家使用了 Three.js 的魔法和一些具有程序纹理的巧妙作品来实现这个概念。

请参阅 Eli Fitch 的 Pen #3December 假粒子斑点

Edwin Chen 的 CSS Blob 生成器

我们将使用 Edwin Chen 的 CSS Blob Generator 来结束我们的收藏。正如标题所述，这支笔有一个小操场，您可以在其中创建一个斑点形状。

在这里，您会找到一个小面板，您可以在其中为每个边框指定一个半径。尽管它是静态且扁平的，但您可以轻松地复制结果并在 JavaScript 的帮助下将其设置为运动。

查看 Edwin Chen 的 Pen CSS Blob Generator

营造平静氛围的完美造型

如今，流畅和平静的液体行为越来越流行也就不足为奇了。它就像一条穿过森林的迷人小溪，引诱您进入，并在瞬息万变的网络世界中充当宁静的岛屿。

基于 blob 的动画注定要造福于现代项目。尽管它们肯定会引起注意，但它们并不引人注目。无论您是追求优雅、扁平化的实现还是奢华的 3D，它都能轻松营造出一种平静的氛围。

它将丰富体验，装饰背景，同时让位于内容。这些背景将帮助您保持视觉和文本数据之间的平衡。