10个超赞的动画LOGO赏析 [附源码]

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

1. Flowers SVG

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

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

> 查看演示及源码

2. Carbon LDP

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

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

> 查看演示及源码

3. Binary Lab

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

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

> 查看演示及源码

4. Pure CSS3 Stack Overflow

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

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

> 查看演示及源码

5. Monster Energy Logos

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

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

> 查看演示及源码

6. Subvisual

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

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

> 查看演示及源码

7. Pixel Logo Animation

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

> 查看演示及源码

8. Alex Aloia Logo

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

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

> 查看演示及源码

9. Bayleys

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

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

> 查看演示及源码

10. Nintendo Switch

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

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

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

> 查看演示及源码

写在最后

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

设计小咖译