最受歡迎和復(fù)雜的效果是液體模擬。要做到這一點(diǎn)，它需要電源 - 來(lái)自代碼和處理器。幸運(yùn)的是，這些物品不再供不應(yīng)求。

因此，我們發(fā)現(xiàn)了許多不屬于這個(gè)世界的液體效應(yīng)的例子。有些看起來(lái)非常逼真，而有些則更像是科幻幻想。讓我們來(lái)看看：

這種漣漪，液體質(zhì)量令人著迷。但是當(dāng)你發(fā)現(xiàn)它也是互動(dòng)的時(shí)候，它會(huì)變得更加令人印象深刻。blob與光標(biāo)一起旋轉(zhuǎn)，使這個(gè)WebGL驅(qū)動(dòng)的片段看起來(lái)像是一個(gè)在空間中漂浮的球體。

 

歡閃亮的球體

堅(jiān)持球形主題，這個(gè)例子展示了更加完美的液體。而且，即使我們看不到這樣的東西漂浮在周圍（好吧，不是在地球上，無(wú)論如何），閃亮的紋理和藍(lán)色投射出逼真的外觀。液體中的方格圖案在這里也有幫助，因?yàn)樗l(fā)出游泳池的氛圍。

搖搖晃晃的按鈕

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

按下按鈕特效

現(xiàn)在有很多關(guān)于微交互的討論。這些小細(xì)節(jié)可以為用戶體驗(yàn)帶來(lái)奇跡。拿這個(gè)簡(jiǎn)陋的單選按鈕。單擊它時(shí)，您不僅可以獲得中間的普通舊點(diǎn)。在這種情況下，按鈕使用整潔的動(dòng)畫使其看起來(lái)好像一滴液體已經(jīng)填滿了您的選擇。它簡(jiǎn)單，快速，有效。

液體裝載機(jī)

在加載圖形是網(wǎng)頁(yè)設(shè)計(jì)的悠久的傳統(tǒng)之一。這么多，以至于它幾乎變得有點(diǎn)無(wú)聊。但這個(gè)充滿液體的例子既獨(dú)特又有趣。對(duì)于飲料公司或酒吧而言，這將是完美的恭維。最重要的是，不需要JavaScript！

泡泡特效

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

深刻的生物

這個(gè)例子是多方面的，因?yàn)樗峁┝藥讉€(gè)視角。它開始于一片紫色的霧中，下面是一團(tuán)漣漪。然后，它放大，露出高大的，移動(dòng)的粘液塊。如果這還不足以保持您的興趣，那么設(shè)置也很容易調(diào)整。這個(gè)Three.js創(chuàng)造了一個(gè)偉大的水肺潛水模擬器 - 如果你在另一個(gè)星球上潛水，那就是。

變形液體彩虹體驗(yàn)

這是一個(gè)復(fù)古和現(xiàn)代的完美網(wǎng)格。一方面，你可以看到液晶彩虹的變化 - 這是20世紀(jì)60年代的經(jīng)典外觀。但如果不使用GLSL陰影就不可能。動(dòng)畫非常流暢，只需要60行JavaScript即可實(shí)現(xiàn)。

倒出一些驚人的效果

過(guò)去，即使嘗試液體模擬也是一個(gè)值得懷疑的選擇。無(wú)論如何，效果并不是那么好，并且大多數(shù)用戶沒(méi)有足夠的馬力去觀看它們。這種情況近年來(lái)都發(fā)生了變化。

您不再需要依賴資源占用瀏覽器插件來(lái)創(chuàng)建逼真的東西。事實(shí)上，我們可以使用的解決方案是跨瀏覽器且相對(duì)輕量級(jí)。這使您可以自由地進(jìn)行實(shí)驗(yàn)并讓這些液體效應(yīng)溢出到您的項(xiàng)目中。