最受歡迎和復雜的效果是液體模擬。要做到這一點，它需要電源 - 來自代碼和處理器。幸運的是，這些物品不再供不應求。

因此，我們發現了許多不屬于這個世界的液體效應的例子。有些看起來非常逼真，而有些則更像是科幻幻想。讓我們來看看：

這種漣漪，液體質量令人著迷。但是當你發現它也是互動的時候，它會變得更加令人印象深刻。blob與光標一起旋轉，使這個WebGL驅動的片段看起來像是一個在空間中漂浮的球體。

 

歡閃亮的球體

堅持球形主題，這個例子展示了更加完美的液體。而且，即使我們看不到這樣的東西漂浮在周圍（好吧，不是在地球上，無論如何），閃亮的紋理和藍色投射出逼真的外觀。液體中的方格圖案在這里也有幫助，因為它散發出游泳池的氛圍。

搖搖晃晃的按鈕

雖然從全屏演示的角度考慮液體效果很誘人，但它也可以以較小的形式工作。這個按鈕一開始看起來很普通，但是在懸停時它變成了JELL-O的顫抖。玩起來非常有趣！雖然為這個小家伙提供動力所花費的JavaScript量對于實際使用來說可能是不切實際的，但它確實表明一個小的UI元素可以產生很大的影響。

按下按鈕特效

現在有很多關于微交互的討論。這些小細節可以為用戶體驗帶來奇跡。拿這個簡陋的單選按鈕。單擊它時，您不僅可以獲得中間的普通舊點。在這種情況下，按鈕使用整潔的動畫使其看起來好像一滴液體已經填滿了您的選擇。它簡單，快速，有效。

液體裝載機

在加載圖形是網頁設計的悠久的傳統之一。這么多，以至于它幾乎變得有點無聊。但這個充滿液體的例子既獨特又有趣。對于飲料公司或酒吧而言，這將是完美的恭維。最重要的是，不需要JavaScript！

泡泡特效

受到Android充電動畫的啟發，這個片段提供溫和的波浪和慷慨的氣泡幫助。使用滑塊，您可以提高或降低填充水平。切換開關可讓您更改要查看的顏色和氣泡類型。

深刻的生物

這個例子是多方面的，因為它提供了幾個視角。它開始于一片紫色的霧中，下面是一團漣漪。然后，它放大，露出高大的，移動的粘液塊。如果這還不足以保持您的興趣，那么設置也很容易調整。這個Three.js創造了一個偉大的水肺潛水模擬器 - 如果你在另一個星球上潛水，那就是。

變形液體彩虹體驗

這是一個復古和現代的完美網格。一方面，你可以看到液晶彩虹的變化 - 這是20世紀60年代的經典外觀。但如果不使用GLSL陰影就不可能。動畫非常流暢，只需要60行JavaScript即可實現。

倒出一些驚人的效果

過去，即使嘗試液體模擬也是一個值得懷疑的選擇。無論如何，效果并不是那么好，并且大多數用戶沒有足夠的馬力去觀看它們。這種情況近年來都發生了變化。

您不再需要依賴資源占用瀏覽器插件來創建逼真的東西。事實上，我們可以使用的解決方案是跨瀏覽器且相對輕量級。這使您可以自由地進行實驗并讓這些液體效應溢出到您的項目中。