一本大道香蕉久在线播放29

    <em id="ii1f9"></em>

    <ruby id="ii1f9"><p id="ii1f9"><tt id="ii1f9"></tt></p></ruby>
      <li id="ii1f9"></li>
      1. <rp id="ii1f9"></rp>

        <s id="ii1f9"><strike id="ii1f9"><u id="ii1f9"></u></strike></s>

        1. <tbody id="ii1f9"><center id="ii1f9"></center></tbody>
        2. Menu

          8个CSS和JavaScript片段,用于创建逼真的液体效果

          <返回列表

          特殊效果已经在网页设计中使用了很多年了(Flash,有人吗?)。但是今天的技术为设计师提供了更好的方法来将它们集成到我们的项目中。在CSS3(大量JavaScript库)和拥有强大硬件的用户之间,我们拥有创建引人注目效果所需的所有资源。

          其中最受欢迎和最复杂的效果是液体模拟。为了做到正确,它需要来自代码和处理器的能量。幸运的是,这些商品不再短缺。

          因此,我们发现了许多世界上没有的液体效应的例子。有些看起来非常逼真,而有些则更像科幻幻想。我们来看看:

          那家伙活过来了

          这个涟漪般的液体让人着迷。但当你发现它也是互动的,它会变得更加令人印象深刻。blob随光标一起旋转,使这个WebGL支持的片段看起来像是一个漂浮在太空中的球体。

          对不起,我喜欢亮晶晶的

          这个例子以球形为主题,演示了一种形状更为良好的液体。而且,即使我们看不到像这样的东西漂浮在水面上(好吧,无论如何,在地球上也没有)纹理蓝色是一种逼真的外观。液体中的方格图案在这里也有帮助,因为它发出一种游泳池的感觉。

          摇摆不定的按钮

          虽然从全屏演示的角度来考虑液体效果很诱人,但它也可以在更小的形式下工作。这个按钮一开始看起来很普通,但在悬停的时候,它变成了一大块发抖的果冻。玩起来真有趣!虽然为这个小家伙提供支持所需的JavaScript数量对于现实世界的使用来说可能是不切实际的,但它确实表明,一个小的UI元素可以产生很大的影响。

          按钮上的一滴

          有很多关于微相互作用这些天。这些小细节可以为用户体验创造奇迹。拿着这个不起眼的单选按钮。当你点击它,你得到的不仅仅是一个普通的老点在中间。在本例中,该按钮使用了一个整洁的动画,使其看起来好像一滴液体已经充满了您的选择。它简单、快速、有效。

          液体装载机

          这个加载图形是网页设计的一个长期传统。太多以至于它几乎变得有点无聊。但这个充满液体的例子既独特又有趣。这将是一个完美的赞美,例如,一个饮料公司或酒吧。最棒的是,不需要JavaScript!

          榨干我

          这个片段的灵感来自于一个安卓充电动画,它提供了柔和的波浪和慷慨的泡沫帮助。使用滑块,可以提高或降低填充级别。拨动开关让你改变你想要看到的气泡的颜色和类型。

          深海生物

          这个例子是多方面的,因为它提供了几个视角。它从紫色的雾中开始,下面是一团蓝色的涟漪。然后,它放大,露出高高的,不断变化的黏液。如果你的设置不够容易保持你的兴趣。这个3.js的创造是一个伟大的潜水模拟器-如果你在另一个星球潜水,那就是。

          变形液虹体验

          这是一个完美的网格复古的而且很现代。一方面,你可以看到一个移动的液体彩虹-一个经典的60年代外观。但是如果不使用GLSL明暗处理,这是不可能的。动画非常流畅,只需要60行JavaScript就可以实现。

          倾吐一些惊人的效果

          过去,即使尝试液体模拟也是一个值得怀疑的选择。效果不是那么好,而且大多数用户没有足够的马力来观看。这一切在最近几年发生了变化。

          你不再需要依赖占用资源的浏览器插件来创建现实的东西。事实上,我们可以使用的解决方案是跨浏览器的,并且相对轻量级。这给了你实验的自由,让那些液体效应扩散到你的项目中。


          最新网站设计资讯
          企业网站建设

          企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

          联系我们

          电话:18868949445QQ:1611387063 邮箱:[email protected]

          联系云轩总监微信

          微信
          一本大道香蕉久在线播放29