<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

          CSS,JS&SVG标志设计的10个不可思议的例子

          <返回列表

          最近有一个领域在尝试使用CSS来全面设计或增强艺术品。例如,设计师们曾试图重现流行音乐字符结果令人印象深刻

          类似地,我们也看到一些用CSS创建的非常有趣的徽标,以及大量的JS和SVG。它们一起提供了其他格式所没有的灵活性。

          让我们看看10个用CSS、JavaScript和SVG组合构建的logo示例。有的是原创,有的来自知名品牌:都值得欣赏。

          动画烟花

          这个动画.jslogo动画使用CSS和(当然)JS的组合来创建一个彩色的动态的logo。不仅有一个很酷的介绍动画,而且随后的点击标志释放更多的烟花。有点上瘾。

          轻松缩放

          使用CSS作为logo的一个有趣的优点是能够缩放以匹配任何大小,这很像SVG文件。下面的Shop Talk的示例logo展示了CSS的像素完美缩放,旁边是一个PNG,它跟不上。

          手写的

          这个例子已经有一段时间了,但它仍然很漂亮。标志的脚本文本显示出来,就像是在屏幕上手写的一样。这很简单但很有效。

          打开和关闭

          虽然这个白色的标志在五颜六色的背景下看起来非常漂亮,但真正的宝石是内置的播放/反转功能。点击“play”将使logo通过一个流畅的动画出现,而reverse(你猜到了)会将整个过程反向。这在某些情况下非常有用,例如,您想要表示一个元素的结束。

          纯铬

          这是Chrome徽标的忠实呈现,使用纯CSS和单个HTML元素完成。它真实地展示了CSS在创建无缝外观和复杂形状方面所能完成的工作。旋转悬停效果也很不错。

          在聚光灯下

          将鼠标悬停在这支笔中的任一个徽标上,将在光标的直接区域产生“聚光灯”效果。它增加了一个酷的元素,并鼓励互动。

          独特的绘画效果

          这个例子在两个层次上都很出色。首先,从某种技术绘图到成品的动画是有趣的。其次,巧妙的动画渐变背景为整个场景添加了完美的补充。

          很小,但很有趣

          好吧,最小的和有趣的通常不会一起被提及。但在这种情况下-它适合。这个简单的logo在背景中有一道彩虹般的动画积木,为原本很平淡的东西增添了个性。

          巧妙地讲故事

          动画是logo的一大时尚,但有时它可能有点太多。这个例子之所以如此伟大,是因为开篇的动画是对品牌的一种赞美而不过分。

          logo可以做得更多

          多年来,我们一直把logo当作一种静态资源。但是,当你结合CSS、JavaScript和SVG的强大功能时,一个logo就可以成为一个我们可以添加一些真正的交互性的地方。而与标志的互动,本质上就是与品牌的互动。因此,这不仅是一种为你的网站添加另一个酷功能的做法,也是一种提高品牌知名度的练习。


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

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

          联系我们

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

          联系云轩总监微信

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