400-800-9385
网站建设资讯详细

10 个令人难以置信的 CSS、JavaScript 和 SVG 标志设计示例

发表日期:2023-02-09 15:30:53   作者来源:王熙程   浏览:1234   标签:标志设计    
最近进行了大量实验的一个领域是利用 CSS 来全面设计或增强艺术作品。例如,设计师们曾尝试重新塑造流行的角色,并取得了令人瞩目的成果。
 
同样,我们还看到一些非常有趣的徽标是使用 CSS 创建的,同时还加入了大量的 JavaScript 和 SVG。它们一起提供了其他格式所没有的一定程度的灵活性。
 
让我们来看看十个使用 CSS、JavaScript 和 SVG 组合构建的徽标示例。有的是原装的,有的是知名品牌的:都值得欣赏。
 
Julian Garnier 的动画烟花
 
这个anime.js标志动画使用 CSS 和(当然)JS 的组合来创建一个色彩缤纷的动态动画标志。不仅有很酷的介绍动画,而且随后点击徽标会释放更多烟花。这有点让人上瘾。


标志设计1

Hugo Darby-Brown轻松扩展
 
将 CSS 用于徽标的一个有趣优势是能够缩放以匹配任何尺寸——很像 SVG 文件。下面的 Shop Talk 徽标示例展示了 CSS 的像素级完美缩放,旁边是一个不能完全跟上的 PNG。
 
标志设计2
 
灰鬼手写
 
这个例子已经存在了一段时间,但它仍然很漂亮。徽标的脚本文本显示出来,就好像它是在屏幕上手写的一样。它简单但有效。
 
标志设计3
 
由 Marco Barría打开和关闭
 
虽然这个白色标志在彩色背景上看起来很棒,但这里真正的瑰宝是内置的播放/反转功能。点击“播放”将使标志通过光滑的动画出现,而反转(你猜对了)则完成整个过程向后处理。这在某些情况下很有用,例如,您想要表示元素的关闭。
 
标志设计4
 
Mike King 的纯铬
 
这是 Chrome 徽标的忠实再现,使用纯 CSS 和单个 HTML 元素完成。它显示了 CSS 在创建无缝外观和复杂形状方面可以完成多少工作。旋转悬停效果也很不错。
 
标志设计5
 
在Nikk Tifan 的聚光灯下
 
将鼠标悬停在这支笔中的任何一个徽标上,都会在光标的直接区域产生“聚光灯”效果。它增加了酷元素并鼓励互动。
 
标志设计6
 
Cody独特的绘图效果
 
这个例子在几个层面上都很出色。首先,将标志从一种技术图纸变成成品的动画看起来很有趣。其次,微妙的动画渐变背景完美地衬托了整个场景。
 
标志设7
 
Melissa Cabral 设计的简约而有趣的标志
 
好吧,极简和有趣通常不会一起提到。但在这种情况下 - 它适合。这个简单的标志在背景中带有彩虹动画块,为原本非常平淡的事物增添了个性。
 
标志设计8
 
Sam Chahine巧妙地讲故事
 
动画是徽标中的一大时尚,但有时可能有点过头了。这个例子之所以如此出色,是因为开篇动画是对品牌的赞美,但又不过分。
 
标志设计8
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6670.html