CSS3测试之——QQ企鹅
自从HTML5还有CSS3草案公布以来,国内兴起了一股学习的热潮,再包括JS2,这些都是未来WEB前端所发展的方向。做为一个WEB前端人员,必需要时刻关注前沿知识,不然等待的只有淘汰。不过,就我在公司接触的一些项目的统计来看,IE6还是浏览器占有率的大头,超过半数。所以,想迎来全面支持html5/css3的时代,恐怕还是有点遥远。
言归正传,当前关于CSS3,有个挺有名的机器猫测试页面,说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下,实很大噱头在里面,不知是有意还是无意,造成了在IE各版本下表现不一的状况,好像有点故意打压IE的嫌疑,虽然我也不喜欢IE。其实总的说来,要么就是支持,要么就是不支持,其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3,而是用各自的私有属性来支持而已。
不过看完之后,突发其想,想画一个QQ企鹅。说干就干,花了半天的时间,我承认也有参考下机器猫的代码,但是这只企鹅在不同浏览器下没有那么多的形态,只有支持与不支持两种。如下:

IE9以下的IE版本,会是左边那种情况;FF以及webkit内核的浏览器会是右边那种情况(opera下没有肚皮上的阴影),当然,版本不要太低。
虽然也没多少技术含量,但原创也辛苦。欢迎朋友们转载,但请标明出处。谢谢!
提示:你可以先修改部分代码再运行。
32条留言 立即发表评论
强大~~
IE下像机器人,哈哈
呵呵,只是好玩而已了。没啥实际上的用途
我搞过一个海绵宝宝,不过只搭了一个框架,没全部补全啊
完成了的话发来看看哈。
博主可否申请交换链接
网站:web前端寒风 http://www.webbise.com
贵博客已经加好
已经加好了,呵呵。
您好~我是王培栋 最近一直在学习中~~我的QQ:654371743
哈哈~~看了一下 !不错哦!
哈哈~~感觉不错!在看看~~
“FF等webkit内核的浏览器会是右边那种情况” 笔误?
呃,这位朋友是指哪里?没看出来哎
哈哈,无意中路过,ff不是webkit内核滴~~
俺知道FF不是webkit内核,样式表里都有-webkit及-moz的区分。不过看看这句话好像的确有歧义,我改一下。
您好~文章不错 看一下文章!缓解一下压力!轻轻走过!
css这东西想精通太难了
GG,你太强了
只能看出,博主的审美水平有很大的提升空间
哥的这个css3的企鹅怎么凶神恶煞的呢!
建议你写仔细点!
写的太简单了!
腾讯的企鹅应该看起来是很漂亮的……
建议多用几个层做仔细点,在发出来.
好吧,我承认没花多少时间来弄这个东西,我觉得没有这个必要,再仔细去弄只是在浪费时间而已。用CSS画图本身就是个噱头,并没有多少应用上的意义,之前还有牛人用样式写一个个像素来画图。这并没有什么技术含量,纯体力活而已。画得出漂亮的图,不见得就能熟练地掌控整站的架构。
我发这篇文章,只是想告诉大家CSS3能做些什么,让大家讨论一下下一个阶段的前端技术,而不是讨论这只企鹅好不好看。
PS:我没学过美术,审美方面我不发表意见。但至少我的同事 专业的美术设计师对此图表示肯定。
我觉这只企鹅帅呆了~
css3也不是为了画漂亮企鹅
这个仅仅是做一个技术的研究。要做就做好看啥。
专业的美术设计师 不对他对这个图做了肯定了的话我就无话可说了。
不过这位朋友追求完美的精神是很值得学习滴
太牛了,这可需要大量的代码啊
周末快乐啊
博主好久都没写文章了吧,我也好久没来了 哈哈