当今时代发展非常快，尤其是互联网，早在几年前爆出的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，非常方便，话不多说，去试试吧。