<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      Menu

      8個CSS和JavaScript片段,用于創建逼真的液體效果

      <返回列表

      特殊效果已經在網頁設計中使用了很多年了(Flash,有人嗎?)。但是今天的技術為設計師提供了更好的方法來將它們集成到我們的項目中。在CSS3(大量JavaScript庫)和擁有強大硬件的用戶之間,我們擁有創建引人注目效果所需的所有資源。

      其中最受歡迎和最復雜的效果是液體模擬。為了做到正確,它需要來自代碼和處理器的能量。幸運的是,這些商品不再短缺。

      因此,我們發現了許多世界上沒有的液體效應的例子。有些看起來非常逼真,而有些則更像科幻幻想。我們來看看:

      那家伙活過來了

      這個漣漪般的液體讓人著迷。但當你發現它也是互動的,它會變得更加令人印象深刻。blob隨光標一起旋轉,使這個WebGL支持的片段看起來像是一個漂浮在太空中的球體。

      對不起,我喜歡亮晶晶的

      這個例子以球形為主題,演示了一種形狀更為良好的液體。而且,即使我們看不到像這樣的東西漂浮在水面上(好吧,無論如何,在地球上也沒有)紋理藍色是一種逼真的外觀。液體中的方格圖案在這里也有幫助,因為它發出一種游泳池的感覺。

      搖擺不定的按鈕

      雖然從全屏演示的角度來考慮液體效果很誘人,但它也可以在更小的形式下工作。這個按鈕一開始看起來很普通,但在懸停的時候,它變成了一大塊發抖的果凍。玩起來真有趣!雖然為這個小家伙提供支持所需的JavaScript數量對于現實世界的使用來說可能是不切實際的,但它確實表明,一個小的UI元素可以產生很大的影響。

      按鈕上的一滴

      有很多關于微相互作用這些天。這些小細節可以為用戶體驗創造奇跡。拿著這個不起眼的單選按鈕。當你點擊它,你得到的不僅僅是一個普通的老點在中間。在本例中,該按鈕使用了一個整潔的動畫,使其看起來好像一滴液體已經充滿了您的選擇。它簡單、快速、有效。

      液體裝載機

      這個加載圖形是網頁設計的一個長期傳統。太多以至于它幾乎變得有點無聊。但這個充滿液體的例子既獨特又有趣。這將是一個完美的贊美,例如,一個飲料公司或酒吧。最棒的是,不需要JavaScript!

      榨干我

      這個片段的靈感來自于一個安卓充電動畫,它提供了柔和的波浪和慷慨的泡沫幫助。使用滑塊,可以提高或降低填充級別。撥動開關讓你改變你想要看到的氣泡的顏色和類型。

      深海生物

      這個例子是多方面的,因為它提供了幾個視角。它從紫色的霧中開始,下面是一團藍色的漣漪。然后,它放大,露出高高的,不斷變化的黏液。如果你的設置不夠容易保持你的興趣。這個3.js的創造是一個偉大的潛水模擬器-如果你在另一個星球潛水,那就是。

      變形液虹體驗

      這是一個完美的網格復古的而且很現代。一方面,你可以看到一個移動的液體彩虹-一個經典的60年代外觀。但是如果不使用GLSL明暗處理,這是不可能的。動畫非常流暢,只需要60行JavaScript就可以實現。

      傾吐一些驚人的效果

      過去,即使嘗試液體模擬也是一個值得懷疑的選擇。效果不是那么好,而且大多數用戶沒有足夠的馬力來觀看。這一切在最近幾年發生了變化。

      你不再需要依賴占用資源的瀏覽器插件來創建現實的東西。事實上,我們可以使用的解決方案是跨瀏覽器的,并且相對輕量級。這給了你實驗的自由,讓那些液體效應擴散到你的項目中。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网