使用纯洁的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。

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

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

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

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

 -webkit-transform: skewX(-5@R_406_2829@);
     -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代码量以及漫天飞雪的绝对定位使得此效果基本上在实际项目中没有什么应用的前景，所以，懒得多说，还是留点时间看日剧《ady 最后的犯罪画像》吧，大爱北川景子。所以，就这些。

参涉页面：
http://www.w3.org/html/logo/
CSS3 in HTML5? HTML5 in CSS3!
HTML5 and the New W3C-Endorsed Logo

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！