令人愉悅的網(wǎng)站設計重點可能是產(chǎn)生意外的用戶體驗并使訪客吸引您的網(wǎng)站的原因之一。一個趨勢技術就是在網(wǎng)站設計中使用液體動畫。他的趨勢的創(chuàng)意之處在于，您可以通過多種方式使用它來創(chuàng)建適合您的內(nèi)容的網(wǎng)站設計界面。

在這里，我們將看一下這種趨勢的各種例子，以及如何讓它為您服務。

什么是液體動畫？

液體動畫是屏幕上的運動，有一種水一樣的感覺。這些動畫通常有一個緩慢的，流動的運動，可能波動或潮起潮落。（這就是它工作的原因；液體動畫必須感覺真實。）

液體動畫可以作為懸停狀態(tài)或視頻或滾動動畫的一部分發(fā)揮作用。您甚至可以在卷軸上激活一個液體動畫。

這項技術已經(jīng)開始迅速流行起來，主要是因為計算機和較小的web設備以及瀏覽器能夠有效地呈現(xiàn)這項技術。

這種趨勢的根源可以追溯到在動畫設計中使用斑點形狀。去年相當流行的許多設計（包括上面的Fleava）都帶有某種液態(tài)動畫元素。

液體層

液體動畫是一個流行的技術與組合網(wǎng)站和創(chuàng)意機構(gòu)，可能因為這是一個地方，許多網(wǎng)站設計師感到舒適的測試和玩新的設計概念。

液體動畫的工作與其他趨勢，如分層效果。（您還將在這里的大多數(shù)示例中看到其他趨勢。）

Ilya Kulbachny以兩種不同的方式使用了兩層液體動畫，為簡單的設計增加了很多視覺效果。頂層包括以不受用戶交互影響的液體動畫和速度移動的文本。

背景層似乎是一個圖像，但當您懸停在圖片的邊緣移動在液體流動。圖像隨著鼠標移動而移動，并像水一樣懸浮。

液體懸停動作

液體懸停動畫狀態(tài)可能是這種趨勢最流行的應用之一，沒有任何東西可以提示您進入液體動畫，直到鼠標以動畫懸停狀態(tài)移動到項目上。

這是一個簡單又討人喜歡的工具，可以吸引用戶。

關于流動動畫的事情是運動是如此真實和流動，它實際上鼓勵人們不斷地玩它來看看運動是如何發(fā)生和工作的。

液體"滾動"

液體動畫是一個創(chuàng)意的"滾動"或?qū)Ш焦ぞ?。（您肯定想點擊上面的例子。）

通過在屏幕上拖動和拖動鼠標，圖像的移動感覺就像在水族箱中旋轉(zhuǎn)。您可以看到所有的元素在您周圍移動而不移動。

然后，當您停下來的時候，就會有一小段動畫，隨著您的動作而來的波紋和速度似乎都在屏幕上定格了。

運動感覺難以置信的真實，并把用戶帶到設計的空間。

液體背景/前景

液體動畫可以作為設計的背景或前景的設計元素，在沒有用戶交互的情況下"運行"。

在《欲望的革命》之外，還有一個背景/前景元素，就是這樣做的。這些小斑點在屏幕上移動，甚至相互連接。當鼠標處于額外的懸停狀態(tài)時，它們會進一步產(chǎn)生動畫和變形。

這個指針也有一種液體的感覺，以博客作為光標，在屏幕上的運動有一種真實的感覺。blob指針幾乎變慢以匹配其他元素的運動。

液體電影

電影圖像作為一種趨勢來了又去，然后隨著更流暢的動畫重新出現(xiàn)。

這些設計包括靜態(tài)和動態(tài)圖像的組合——通常在背景中——有一些流動的運動。

在上面1-1的例子中，由于裙子的運動，圖片中的女子看起來像是在水下。它很簡單，但在視覺上很吸引人。網(wǎng)站設計使用了各種各樣的其他動畫技術下滾動，以及。

水下運動

在上面的例子中有暗示-水下風格的運動-這里它是主要的動畫效果。

水下運動，一種緩慢的，流動的運動是使用這項技術的一種流行方式。Les Animals使用了一個動畫插圖，看起來像在水下移動的植物。形狀在一種舒緩、緩慢的模式中移動和流動。

如果您與設計互動，有一個額外的液體動畫狀態(tài)鼠標移動。它是微妙的，完全適合其余的界面設計。

液體印刷

我們已經(jīng)看到了一點，但是液體動畫效果也可以應用到排版上。

使這種技術在字母上工作的訣竅是保持單詞的可讀性。如果在任何時候文本被拉伸或拉到不可讀的程度，則表示動畫走得太遠了。

這可能是一種相當微妙的平衡，但如果做得好，看著和互動會很有趣。文本元素上的液體動畫可以自己運行，比如上面Myles Ng的例子，也可以作為懸停狀態(tài)運行。

結(jié)論

液體動畫是一種主流的設計技術。動態(tài)可以讓用戶對您的網(wǎng)站設計更感興趣，并提供更多與內(nèi)容互動的理由。

這個網(wǎng)站設計技巧應該看起來簡單和現(xiàn)實。動作太快或看起來是被迫的，不會有同樣的令人愉快的吸引力，您期望從一個液體動畫中細微的運動。