惊人的CSS和JavaScript动画logos例子

https://codepen.io/lindell/pen/mEVgJP

Stack Overflow logo是我最喜欢的logo之一，因为它非常简单，但易于识别。并且这个片段动画点击预览Stack logo图标只使用纯CSS3。
这是迄今为止我见过的最令人印象深刻的纯CSS动画之一，最终产生的logo看起来很像官方的logo，动画在每个主流浏览器中展示起来都很流畅。任何一个喜欢纯CSS/CSS3动画的工程师都会喜欢上这个片段。

https://codepen.io/flwrs/pen/gLrygN

Web上最热门的动画趋势是SVG annimation，它将越来越火热，这个花标志点击预览动画是SVG在行动上的一个很好的例子。
Logo的图标和文字已在HTML中的<svg>中创建，动画的顺序通过CSS和自动的pageload机制控制。这需要一些SVG特定的CSS属性，如stroke-dashoffset，它按顺序推动轮廓运动来创建这个神奇的动画效果。

现在构建一个HTML和CSS的动画logo比以前容易多了，配合更新的JavaScript库可以进一步推动网络动画的发展。

看看这个画廊的10个令人难以置信的自定义动画logo，它们展示的是一些未知的实体或者世界知名品牌。

1、Flowers SVG点击预览

Web上最热门的动画趋势是SVG annimation，它将越来越火热，这个花标志点击预览动画是SVG在行动上的一个很好的例子。
Logo的图标和文字已在HTML中的<svg>中创建，动画的顺序通过CSS和自动的pageload机制控制。这需要一些SVG特定的CSS属性，如stroke-dashoffset，它按顺序推动轮廓运动来创建这个神奇的动画效果。

2、Carbon LDP点击预览

Carbon LDPlogo是相当详细和复杂的，但开发人员David McFeders把他的动画Carbon logo点击预览建立在CSS/Compass上。
每一块这样的代码都很容易从标志尺寸到动画速度进行自定义，它依赖于纯CSS，使循环无止境。即使每个字母由单个PNG图像组成，您也可以使用自己自定义的字体反向设计该设计。

3、Binary Lab点击预览

Binary Lab's动画logo点击预览是这个列表中比较复杂的动画效果之一。它从瓶子的上方拉取数字，并且查看瓶子里对应的数字进行相应的褪色。
动画本身是通过CSS控制的，但这支笔还依赖于TweenMax库添加重复数字和自定义alpha转换。所有的一切都非常有创意的使用了CSS和JavaScript的现代网络动画。

4、Pure CSS3 Stack Overflow点击预览

Stack Overflow logo是我最喜欢的logo之一，因为它非常简单，但易于识别。并且这个片段动画点击预览Stack logo图标只使用纯CSS3。
这是迄今为止我见过的最令人印象深刻的纯CSS动画之一，最终产生的logo看起来很像官方的logo，动画在每个主流浏览器中展示起来都很流畅。任何一个喜欢纯CSS/CSS3动画的工程师都会喜欢上这个片段。

5、Monster Energy Logos点击预览

Tim Pietrusky的这一系列动画Monster Energy logos点击预览使用SVG和间隔适中的CSS transitions来实现。如果你想对你的logo也进行类似的褪色效果，你可以自由学习和复制他的代码。
这个logo的所有动画定时直接通过Sass控制，所以这是一个纯CSS动画。你可以通过改变变量来改变速度、淡化颜色，或者其他任何东西。

6、Subvisual点击预览

Subvisual有一个非常独特的logo，由Miguel Palhas实现动画效果。它由logo文本和S图标组成。
Logo的一切都是建立于SVG元素上，使操作更容易。虽然绝大多数的动画是通过CSS完成的，但这支笔还依赖于TweenLite库的JavaScript。这是一个优雅的效果，可以根据用户动作（悬停，点击等）重复或触发动画效果。

7、Pixel Logo Animation点击预览

Jura允许任何开发人员使用自由像素字体创建自定义像素逐动画效果，这正是CodePen用户Khaosmuhaha在cpdepen点击预览中使用的。
它使用HTML canvas元素操作纯文本，动画由CSS3 animation 属性提供，但它们通过jQuery控制，这使得我们能够顺序操作动画。
这是结合使用canvas元素和webfont的一个很酷的效果。

8、 Alex Aloia Logo点击预览

如果你正在寻找一个真正复杂的logo动画，那么你可以看看开发者Alex Aloia写的这个示例点击预览。使用他的名字作为名称，他创建了一个复杂的SVG形状系列，使用绘图效果动画。
使用CSS不能实现整个效果，它需要一些JavaScript转换库，如DrawSVG和更流行的D3.js，使用开源库来创建这种独一无二的动画是一件很有趣的事情。

9、Bayleys点击预览

Bayleys logo是一个晦涩复杂的动画效果，但它确实有坚实的边缘，使重新创建的标志容易得像馅饼。
Rafael Contreras的动画片段只使用了38行代码。logo本身是使用SVG元素创建的，动画将相应地操作这些标签。很多logo元素在不同的方向移动使得这些logo的动画效果令人着迷。

10、Nintendo Switch点击预览

任天堂的最新游戏的控制台带有一个辉煌的logo动画，他所有的商业广告和这个示例都由 Koto Furumiya创建。
Koto使用SVG重新构建任天堂开关logo，同时使用CSS动画化整个事物。你会相信这个动画效果只需要50行CSS代码吗？
我最赞赏这个logo动画的真实性，它真的匹配任天堂的动画，示例logo可以看出，它能够强有力的下推和反弹回来。

总结

所有这些例子都是免费、开源的，你可以根据自己的项目研究、克隆和操作。我希望你喜欢这些演示，如果你正在寻找更多的CSS动画例子，你可以看看这个集合，看看其他人做了什么。

原文链接 10 Amazing Examples of CSS & JavaScript Animated Logos