最受欢迎和复杂的效果是液体模拟。要做到这一点，它需要电源 - 来自代码和处理器。幸运的是，这些物品不再供不应求。

因此，我们发现了许多不属于这个世界的液体效应的例子。有些看起来非常逼真，而有些则更像是科幻幻想。让我们来看看：

这种涟漪，液体质量令人着迷。但是当你发现它也是互动的时候，它会变得更加令人印象深刻。blob与光标一起旋转，使这个WebGL驱动的片段看起来像是一个在空间中漂浮的球体。

 

欢闪亮的球体

坚持球形主题，这个例子展示了更加完美的液体。而且，即使我们看不到这样的东西漂浮在周围（好吧，不是在地球上，无论如何），闪亮的纹理和蓝色投射出逼真的外观。液体中的方格图案在这里也有帮助，因为它散发出游泳池的氛围。

摇摇晃晃的按钮

虽然从全屏演示的角度考虑液体效果很诱人，但它也可以以较小的形式工作。这个按钮一开始看起来很普通，但是在悬停时它变成了JELL-O的颤抖。玩起来非常有趣！虽然为这个小家伙提供动力所花费的JavaScript量对于实际使用来说可能是不切实际的，但它确实表明一个小的UI元素可以产生很大的影响。

按下按钮特效

现在有很多关于微交互的讨论。这些小细节可以为用户体验带来奇迹。拿这个简陋的单选按钮。单击它时，您不仅可以获得中间的普通旧点。在这种情况下，按钮使用整洁的动画使其看起来好像一滴液体已经填满了您的选择。它简单，快速，有效。

液体装载机

在加载图形是网页设计的悠久的传统之一。这么多，以至于它几乎变得有点无聊。但这个充满液体的例子既独特又有趣。对于饮料公司或酒吧而言，这将是完美的恭维。最重要的是，不需要JavaScript！

泡泡特效

受到Android充电动画的启发，这个片段提供温和的波浪和慷慨的气泡帮助。使用滑块，您可以提高或降低填充水平。切换开关可让您更改要查看的颜色和气泡类型。

深刻的生物

这个例子是多方面的，因为它提供了几个视角。它开始于一片紫色的雾中，下面是一团涟漪。然后，它放大，露出高大的，移动的粘液块。如果这还不足以保持您的兴趣，那么设置也很容易调整。这个Three.js创造了一个伟大的水肺潜水模拟器 - 如果你在另一个星球上潜水，那就是。

变形液体彩虹体验

这是一个复古和现代的完美网格。一方面，你可以看到液晶彩虹的变化 - 这是20世纪60年代的经典外观。但如果不使用GLSL阴影就不可能。动画非常流畅，只需要60行JavaScript即可实现。

倒出一些惊人的效果

过去，即使尝试液体模拟也是一个值得怀疑的选择。无论如何，效果并不是那么好，并且大多数用户没有足够的马力去观看它们。这种情况近年来都发生了变化。

您不再需要依赖资源占用浏览器插件来创建逼真的东西。事实上，我们可以使用的解决方案是跨浏览器且相对轻量级。这使您可以自由地进行实验并让这些液体效应溢出到您的项目中。