10 个优质的 CSS 与 JS LOGO 动画示例

利用 HTML 和 CSS 制作 LOGO 动画要比以前更容易，通过使用最新的 JavaScript 库也能够使网页动画制作的更加精良。

在本文中，我们将与大家分享 10 个让人印象深刻的世界知名品牌与未知实体的自定义 LOGO 动画示例。一起来 Enjoy 吧！

1. Flowers SVG

SVG 动画作为网上最热门的动画趋势之一，备受大家的关注。而这个花的 LOGO 动画便是一个很好的 SVG 动画示例。

我们可以看到，此 LOGO 的图标和文字在<svg>标签内编写，通过 CSS 来控制动画，并可以自动的完成页面的加载。当然，需要一些 SVG 特定的 CSS 属性支持，例如stroke-dashoffset（译者：表示虚线的起始偏移），它会按顺序来推动轮廓的运动，进而实现了精美的动画效果。

2. Carbon LDP

Carbon LDP 的 LOGO 动画相当的复杂。但是开发者 David McFeders 通过 CSS/Compass 实现了Carbon 的 LOGO 动画，从而也提升了它的逼格。

无论是 LOGO 的大小，还是动画的速度都很容易设置。它由纯 CSS 实现，并保持着无限的循环。虽然，LOGO 的字母是一张 PNG 图片，但你也可以随时利用自己设计的字体进行逆向工程。

3. Binary Lab

Binary Lab 的 LOGO 动画同样是本文中比较复杂的动画效果之一。我们可以看到它的效果：从烧瓶里拉出的数字，在 LOGO 的上方不断的消失。

动画效果是由 CSS 控制的。同时，这个作品依赖了TweenMax 库来添加重复的数字，并完成自定义的 alpha 转换。作者很有创意的利用 CSS 与 JS 实现了这个酷炫的 Web 动画效果。

4. Pure CSS3 Stack Overflow

Stack Overflow 的 LOGO 是我最喜欢的 LOGO 之一，因为它的设计不仅简单，而且易识别。而这个作品仅用 CSS3将 Stack Overflow 的 LOGO 进行了动画效果的实现。

这是迄今为止我看到的最令人印象深刻的纯 CSS 动画之一。最终的展现也与官方的 LOGO 很搭，同时在主流浏览器中动画都可以流畅的运行。相信，任何喜欢 CSS / SCSS 动画的朋友都会喜欢上这个作品。

5. Monster Energy Logos

这个作品是由 Tim Pietrusky 利用 SVG 和均匀的 CSS 转换实现的怪物能量 LOGO 系列动画。如果你也打算在 LOGO 上实现淡入淡出的特效，就可以复制他的代码来学习。

它是一款纯 CSS 实现的动画，所有的动画时间都是由 SCSS 直接进行调控。同时，你也可以通过更改变量来调节动画的速度，淡化颜色。

6. Subvisual

Subvisual 团队拥有非常独特的 LOGO，而开发者 Miguel Palhas 则赋予了它酷炫的动画效果。你会发现构成它的动画效果有两个因素，即 LOGO 的文字和“ S ”形图标。

作品是基于 SVG 元素构成的，也使操纵更简单。虽然作品中的大多数动画都是基于 CSS 编写的，但它也依赖 JavaScript 库：TweenLite。同时，这个作品可以根据用户的操作来重复或触发动画效果。（悬停、点击等）

7. Pixel Logo Animation

通过使用免费的像素字体，任何开发人员都可以制作出自定义的像素动画。而这个作品就是由 CodePen 的用户 Khaosmuhaha 所制作的。

他通过HTML Canvas元素进行纯文本的操作，动画效果则是由 CSS3 的 animation 属性进行驱动，而 jQuery 则控制了全部。所以，我们所见的连续像素动画就这样实现了。

显然，这是一个利用 Canvas 元素与 webfont 构成的炫酷的作品。

8. Alex Aloia LOGO

如果你正在寻找一个真正复杂的 LOGO 动画，可以看看开发者 Alex Aloia 制作的这个示例。在作品中，作者使用了他的名字作为品牌名称，并将一系列复杂的 SVG 形状通过绘图的动画效果展现出来。

作品的整体效果只通过 CSS 来实现是不太可能的，还需要一些 JS 库 （DrawSVG和更流行的D3.js）的支持。但是，利用开源库来实现这种独一无二的动画，还是非常有趣的。

9. Bayleys

Bayleys 的 LOGO 动画的选择，有些令人费解。但 LOGO 厚实的边缘使重制变得易如反掌。开发者 Rafael Contreras 仅通过 38 行代码便实现了动画效果。

LOGO 是基于 SVG 标签制作的，动画效果则是操纵相应的标签来实现。而在不同的方向移动的众多 LOGO 元素，使动画令人着迷。

10. Nintendo Switch

这是来自任天堂最新款游戏机的一个 LOGO 动画。而开发者 Koto Furumiya 在 CodePen 上实现了它们广告片中的动画效果。

Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 实现了它的动画效果。你会相信这个动画只需要 50 行的 CSS 代码吗？

另外，不得不提这个动画效果确实很逼真。强有力的下推与反弹回升效果，确实与任天堂 Switch 的开机动画相吻合。

英文原文：10 Amazing Examples of CSS & JavaScript Animated Logos
译文地址：http://www.jianshu.com/p/b204e854a942