今时代发展非常快，尤其是互联网，早在几年前爆出的HTML5现已被应用广泛，那么是不是公司、网站LOGO都能用HTML5实现呢？今天logofree君就教你使用纯CSS设计HTML5新LOGO。

一、号外号外

其实也不是什么号外了，HTML官方logo早在几年前就华丽丽滴诞生了。您可以到官方logo页面其观摩。

它是如此的闪耀，以至于我不得不用手挡住眼前的强光，它的朝气，它的魄力迎面袭来，让人窒息。

上图为截图，截图也是图。下图为其128卡哇伊袖珍版图片：

下图为256蓬勃朝气青少年版的：

下图为标准256*256 背景索引透明阳刚少年版：

HTML5出了此款logo，意义重大。我觉得这标志着HTML5已经发展到了一个新的台阶，其发展与进步一不可阻挡，透出了HTML5的野心与霸气。

此logo长得有点360安全卫士logo的味道：

难道暗含防御之一，抵御flash或是其他杂碎技术的侵袭。谁知道呢？反正与本文主题无关，愿者自答了。

二、使用纯粹的CSS设计实现此logo

你不得不佩服某些人，总是喜欢乐此不疲地尝试新技术，做些新玩意。比如说Eric，这回，就在HTML5 logo出来不久，其就用比周冬雨还有纯洁的CSS惟妙惟肖地刻画了HTML的新logo。

就实现而言，使用了不少的CSS3的东东，主要用来实现旋转效果。然后，元素很疯狂地使用绝对元素定位。然后，一点一点，就成了。因为使用了CSS3，所以，在IE浏览器下，此logo严重毁容，见下图（截自IE7浏览器）：

所以，您需要移步现代浏览器查看效果，如果要按照效果给各个浏览器排名的话应该是：Chrome ≈ Safari > FireFox > Opera

此logo效果使用CSS3的内容大致就是这些：

-webkit-transform: skewX(-5deg);

-moz-transform: skewX(-5deg);

-o-transform: skewX(-5deg);

-ms-transform: skewX(-5deg);

transform: skewX(-5deg);

-webkit-transform-origin: 100% 0;

-moz-transform-origin: 100% 0;

-o-transform-origin: 100% 0;

-ms-transform-origin: 100% 0;

transform-origin: 100% 0;

其中-ms-前缀，我常戏称的“猫屎”前缀，是针对IE9浏览器的。毕竟国外浏览器比咋们要领先不少，我到现在还没有拉过IE9的小手呢！

本文就是个简单的展示，颇多的CSS代码量以及漫天飞雪的绝对定位使得此效果基本上在实际项目中没有什么应用的前景，所以，懒得多说，还是留点时间让你动手去试吧。当然现在这时代已不需要用CSS去实现设计这样的LOGO，当今有更高级的技术，那就是SVG，用SVG生成的LOGO是矢量源文件，体积小，清晰，应用更广泛，公司LOGO设计都用SVG格式了。有些人可能会说，我不会写代码啊，怎么用SVG设计LOGO呢？放心，当今有现成的LOGO在线设计生成器如logofree，分分钟就帮你生成SVG格式的LOGO，非常方便，话不多说，去试试吧。

相信有很多同学细化自己给自己一个签名啊，或者是一个属于自己的logo，但是呢，对于小白来说呢，就不会了，没有技术没有创意~

不用担心，今天给大家带来的就是免费在线制作LOGO的网站，大家有福啦

一.http://yeelogo.com/#/

YEELOGO是一个可以免费在线制作LOGO的网站，可以自己选择配色，可以自己搭配图案，还可以导入图片，最重要的是还有模板。

​

​

二.http://www.logofree.cn/logo.html

logofree的使用也非常简单，可以自己选择图标，字体和颜色。自己调整后可以免费下载适png格式。​

​

三.https://www.designevo.com/

DesignEvo相对前面来说功能比较少，比较简易，但是也是免费的

​

​

四.https://brandmark.io/

这个网站是我最喜欢的，风格很多，自己写上logo相关的词语，或者一段话，也可以自己配色，最后效果图出来还是更改颜色的

​

​

​

​

​

​

五.https://www.logaster.cn/

这个网站呢功能很齐全，除了一个人玩，还有社区，可以讨论，还有模板

​

​

​

​

六.https://www.logoaa.com/

logoaa网站通过进行简单的设计就可以在线生成公司logo、企业标志、网站logo等。任何LOGO素材都可以在线修改，修改颜色、大小、文字、字体和位置布局等等。不过是要付费的。

​

​

七.https://www.logosc.cn/

只要你输入一个名称，会提供无限创意并自动适配最佳logo字体和颜色。不过也是需要收费的，可以说是logo神器了！

​

​

今天给大家分享的在线LOGO生成网站，大家可以试用啦，不过呢，千万不要拿来应付甲方哦！

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

关注我+评论文章，然后点击我的头像，私信我回复：福利；

即可获得以下福利：

福利一：145GB各种高级设计素材

福利二：20本设计书

福利三：一套全方位抠图攻略教程

福利四：42套PS插件（各种特效效果）

网站图片来源于网络，如有侵权请联系我删除！

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

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

1. Flowers SVG

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

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

项目地址：https://codepen.io/flwrs/pen/gLrygN

2. Carbon LDP

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

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

项目地址：https://codepen.io/MiguelAraCo/pen/QbZqoQ

3. Binary Lab

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

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

项目地址：https://codepen.io/iconjunkie/pen/vLEaNZ

4. Pure CSS3 Stack Overflow

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

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

项目地址：https://codepen.io/lindell/pen/mEVgJP

5. Monster Energy Logos

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

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

项目地址：https://codepen.io/TimPietrusky/pen/vKuja

6. Subvisual

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

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

项目地址：https://codepen.io/naps62/pen/eNMvpQ

7. Pixel Logo Animation

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

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

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

项目地址：https://codepen.io/Khaosmuhaha/pen/MYzRGz

8. Alex Aloia LOGO

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

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

项目地址：https://codepen.io/tripl3inf/pen/QwrEMY

9. Bayleys

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

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

项目地址：https://codepen.io/rafita/pen/aNyRgv

10. Nintendo Switch

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

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

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

项目地址：https://codepen.io/kotofurumiya/pen/VPmNrR

最后

今天分享的所有示例都是免费与开源的，希望你能将它们应用在你自己的项目上。同时，也希望你能喜欢这些 Demos。如果你正在寻找更多关于 CSS 动画的示例，也可以了解下这个合辑。

感谢你的阅读。

注：

1. 本文版权归原作者所有，仅用于学习与交流。

2. 如需转载译文，烦请按下方注明出处信息，谢谢！

英文原文：10 Amazing Examples of CSS & JavaScript Animated Logos

作者：Jake Rocheleau

译者：IT程序狮

译文地址：http://www.jianshu.com/p/b204e854a942