CSS3测试之——QQ企鹅

自从HTML5还有CSS3草案公布以来,国内兴起了一股学习的热潮,再包括JS2,这些都是未来WEB前端所发展的方向。做为一个WEB前端人员,必需要时刻关注前沿知识,不然等待的只有淘汰。不过,就我在公司接触的一些项目的统计来看,IE6还是浏览器占有率的大头,超过半数。所以,想迎来全面支持html5/css3的时代,恐怕还是有点遥远。

言归正传,当前关于CSS3,有个挺有名的机器猫测试页面,说测的是不同浏览器对CSS3的支持情况。本民工找来研究了一下,实很大噱头在里面,不知是有意还是无意,造成了在IE各版本下表现不一的状况,好像有点故意打压IE的嫌疑,虽然我也不喜欢IE。其实总的说来,要么就是支持,要么就是不支持,其实FF以及其它webkit内核的浏览器当前也不是真正支持CSS3,而是用各自的私有属性来支持而已。

不过看完之后,突发其想,想画一个QQ企鹅。说干就干,花了半天的时间,我承认也有参考下机器猫的代码,但是这只企鹅在不同浏览器下没有那么多的形态,只有支持与不支持两种。如下:

IE9以下的IE版本,会是左边那种情况;FF以及webkit内核的浏览器会是右边那种情况(opera下没有肚皮上的阴影),当然,版本不要太低。

虽然也没多少技术含量,但原创也辛苦。欢迎朋友们转载,但请标明出处。谢谢!

提示:你可以先修改部分代码再运行。

相关文章

Moondy 发表于 2010-7-20 441 Views | 类别: Xhtml/Css

23条留言 立即发表评论

  1. #1panhezeng @ 2010-7-20 22:22 回复

    :icon05 IE版的比较好。嘿嘿

  2. #2zhangleifly @ 2010-7-21 16:39 回复

    :icon37 好美啊,哈哈

  3. #3alex @ 2010-7-21 18:10 回复

    强大~~
    IE下像机器人,哈哈

  4. #4卜卜口の @ 2010-7-24 08:29 回复

    :icon17 很不错~

    • moondy @ 2010-7-26 17:19 回复

      呵呵,只是好玩而已了。没啥实际上的用途

  5. #5N @ 2010-7-27 16:34 回复

    我搞过一个海绵宝宝,不过只搭了一个框架,没全部补全啊 :icon23

    • moondy @ 2010-7-28 11:48 回复

      完成了的话发来看看哈。

  6. #6web前端寒风 @ 2010-7-29 09:47 回复

    博主可否申请交换链接
    网站:web前端寒风 http://www.webbise.com
    贵博客已经加好

    • Moondy @ 2010-7-29 16:25 回复

      已经加好了,呵呵。

  7. #7王培栋 @ 2010-8-1 14:51 回复

    您好~我是王培栋 最近一直在学习中~~我的QQ:654371743

  8. #8英文SEO @ 2010-8-2 10:20 回复

    哈哈~~看了一下 !不错哦!

  9. #9深圳标志设计 @ 2010-8-3 19:36 回复

    哈哈~~感觉不错!在看看~~

  10. #10cyj @ 2010-8-9 12:14 回复

    “FF等webkit内核的浏览器会是右边那种情况” 笔误?

    • moondy @ 2010-8-9 13:36 回复

      呃,这位朋友是指哪里?没看出来哎 :icon02

      • clone @ 2010-8-17 17:39 回复

        哈哈,无意中路过,ff不是webkit内核滴~~

      • moondy @ 2010-8-18 15:52 回复

        俺知道FF不是webkit内核,样式表里都有-webkit及-moz的区分。不过看看这句话好像的确有歧义,我改一下。

  11. #11深圳VI设计 @ 2010-8-11 21:41 回复

    您好~文章不错 看一下文章!缓解一下压力!轻轻走过!

  12. #12购物博客 @ 2010-8-15 21:57 回复

    css这东西想精通太难了

  13. #13unicac @ 2010-8-21 20:21 回复

    GG,你太强了

  14. #14KKK @ 2010-8-23 10:18 回复

    只能看出,博主的审美水平有很大的提升空间

  15. #15fish @ 2010-8-31 12:38 回复

    :icon37

  16. #16www.zzjie.com @ 2010-9-9 12:15 回复

    哥的这个css3的企鹅怎么凶神恶煞的呢!
    建议你写仔细点!
    写的太简单了!

    • Moondy @ 2010-9-9 15:33 回复

      :icon20 呃,凶神恶煞,这话说得……

评论

:icon07 :icon02 :icon16 :icon23 :icon37 :icon05 :icon38 :icon35 more »
(Ctrl + Enter)