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

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

下图为256发达朝气青少年版的:

html5logo特效若何应用纯CSS设计HTML5新LOGO PHP

下图为标准256256 背景索引透明阳刚少年版:

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代码量以及漫天飞雪的绝对定位使得此效果基本上在实际项目中没有什么运用的前景,以是,