10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

今天分享的是由 设计小咖的FS 翻译的CSS前端动画,有点厉害,并且带有清晰的源代码,请大家欣赏与研究,enjoy!

强列建议可以关注如下10个令人过目难忘的logo动画效果合集。

1. Flowers SVG

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

SVG动画(SVG animation)算是Web端最热门的动画趋势之一。 而这个花状的LOGO动画算是SVG的动画效果中的一个很不错的例子。

图标和文字是创建在HTML中的<svg>标签内。 然后通过CSS控制顺序动画,并设定自动播放。 这需要设定一些SVG特定的CSS属性,如stroke-dashoffset,它按顺序推动轮廓运动来创建这个有趣的动画效果。

2. Carbon LDP

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Carbon LDP logo相当多细节且复杂, 但是开发GG David McFeders 基于CSS / Compass来实现了这个动感十足的Carbon logo

你能通过代码轻易地自定义它的尺寸和运动速率, 且是循环不止地运动下去的。并且令人印象深刻的是这一切是纯用CSS实现,而没有使用到JS。 虽然字母由单个PNG图像构成,但你也可以使用自己的自定义字体去修改此设计。

3. Binary Lab

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Binary Lab的动画 logo是这个列表中较为复杂的动画效果之一。 它会是从一个瓶子拉取出一些数字,并瓶口也即LOGO上边渐隐消失。

动画本身是通过CSS控制的,但它还依赖于TweenMax库( TweenMax library)添加重复数字和自定义透明度的转换。 这是一个结合使用SVG,CSS和JavaScript实现的非常有创意的的现代网络动画。

4. Pure CSS3 Stack Overflow

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Stack Overflow 的LOGO是我最爱之一,因为它即简单又识别度高。 而这个堆栈动画只使用了纯CSS3来实现。

这是迄今为止我见过的最令人印象深刻的纯CSS动画之一。 最终的输出真的看起来像官方的标志,而动画在每个主流的浏览器都很流畅(animation feels smooth)。相信任何人喜欢纯CSS / SCSS动画都会喜欢这个片段。

5. Monster Energy Logos

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

这个Monster Energy Logo动画是SVG结合间隔很大的CSS过渡来动画来实现的。 如果你想对LOGO有类似的褪色效果,当中的代码可供学习参考。

所有的动画时间轴都是直接通过Sass控制,所以这也是一个纯CSS动画。 而你可以尝试去改变变量来调整速度,淡化的颜色或其他任何东西。

6. Subvisual

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Subvisual的团队有一个非常独特的动效LOGO, 它有两个因素:LOGO文本和“S”图标。

而这一切都是建立在SVG元素上的,所以能使操作更容易。虽然绝大多数动画是通过CSS完成的,但另外也包括有JavaScript(并依赖于TweenLite 库)。 这是一个整齐而简洁的效果,可以根据用户动作(悬停,点击等)重复或触发。

7. Pixel Logo Animation

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

这个LOGO是使用自由像素字体Jura来实现的像素动画效果
它通过使用HTML canvas元素操作纯文本。 动画本身是由CSS3动画属性实现的,但也有借助jQuery控制。
这绝对是一个使用canvas元素结合webfont来实现的酷且有趣的范例。

8. Alex Aloia Logo

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

果你正在寻找一个真正的复杂的LOGO动画,那么可查看由开发GG Alex Aloia所创建的这个示例。他是使用他的名字作为LOGO,创建了一个复杂的SVG形状系列,并模拟“绘图”效果创作的动画。

单纯使用CSS不能实现整个效果,还需要一些JS转换库,如DrawSVG 和较流行的D3.js。而使用开源库来创建这种独一无二的动画是一种有趣的方式。

9. Bayleys

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

Bayleys LOGO 对于实现为动画效果其实算是一个晦涩的选择。因它确实有坚实的边缘,使重新创建的LOGO很可能看起来像馅饼。

而Rafael Contreras只使用38行代码就实现了这个不俗的动画片段。LOGO志本身是使用SVG标签构建的,用CSS相关动画属性操作这些标签。 LOGO元素在不同的方向移动的这种效果实是令人着迷……

10. Nintendo Switch

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]

任天堂的最新游戏控制台带有一个很酷的LOGO动画。 由Koto Furumiya创建。

Koto使用SVG重新构建任天堂的”开关LOGO”,同时使用CSS动画控制整个事物。而整个动画效果只需要约50行的CSS代码,会否让你觉有点不可思议?

我确实要为这个标志动画贴合真实性点上一赞,它的从强有力的下推和反弹动效真的很恰当地展现任天堂LOGO。

写在最后

所有这些例子都是免费的,开源的,为您自己的项目研究,克隆和操作。 我希望你喜欢这些演示,如果你刚好正在寻找类似的CSS动画的例子,看看这个集合,看看其他人做了什么,相信能为你带来不错的收获或灵感。

 

转载注明:云瑞设计
原文地址:设计小咖的FS

分享到:

10个超赞的CSS+SVG打造的LOGO动画赏析 [附源码]》有0条评论

发表评论

返回页顶