使用纯洁的CSS实现HTML5的新logo

这篇文章发布于 2011年01月21日，星期五，22:07，归类于 CSS相关。阅读 56715 次, 今日 5 次 7 条评论

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1393

一、号外号外

号外号外，HTML官方logo华丽丽滴诞生了。您可以起官方logo页面（点击这里）其观摩。

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

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

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

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

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

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

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

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

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

想看效果？您可以狠狠地点击这里：用CSS实现HTML5的新logo demo

就实现而言，使用了不少的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的小手呢！