28

浏览器大 PK，用 CSS 画哆啦A梦

2010年5月29日

感谢读者 米迦勒 的投递。

cssdoraceshi

某日本高手用 css3 画了机器猫哆啦A梦。点击这里进入查看具体的现实效果。如果你查看页面源代码的话会发现这一切全部是css写的。

有意思的是由于不同的浏览器对 css3 的支持程度不同，效果也大不相同，上面即是不同的浏览器对比图：

四个浏览里面 Chrome 的支持度最高，不仅圆角、阴影一应俱全，甚至连眼睛都还会动 @@；Firefox 3.6 次之，除了眼睛不会动之外都和 Chrome 相当；Opera 则是少了阴影；至于 IE8… 呃… IE9 什么时候出来？

via mijiale, masalife




Related posts

coded by nessus
本站文章除注明转载外，均为本站原创编译
转载请注明：文章转载自：谷奥——探寻谷歌的奥秘 [http://www.guao.hk]
本文标题：浏览器大 PK，用 CSS 画哆啦A梦
本文地址：http://www.guao.hk/posts/css-dora.html
本文短网址：http://guao.cc/EQa
作者: 分类: 故事/传闻 标签: , , , ,
  1. leavr
    2011年6月8日21:10 | #1
    回复 | 引用

    stefone :
    这个测试有很大的偏向性，
    如果各位去看看源代码的话，
    会发现有很多属性是webkit-xxx，
    这个属性是针对webkit内核的，
    而chrome就是webkit的内核。
    ie虽然在html5和css3上支持不好（特指速度），
    其他方面都是很优秀的，
    各位可以拿ie9预览版去测全部html5和css3标准（w3c提供的）项目
    会发现其实ie的支持度得分是最高的，但是速度很差。。
    0  2

    @stefone:

    那是因为IE根本没有针对这个功能的属性。

    Thumb up 0 Thumb down 0

  2. jdjlab@163.com
    2010年6月22日13:53 | #2
    回复 | 引用

    IE6的效果是...错位啊...IE6的用户可以看看。

    Thumb up 0 Thumb down 0

  3. 一天到晚想死的鱼
    2010年6月3日19:37 | #3
    回复 | 引用

    傲游画的效果也是很好的哦！但是360那真的是一个悲剧啊！@哥只是个菜鸟 :

    Thumb up 0 Thumb down 1

  4. stefone
    2010年5月30日20:13 | #4
    回复 | 引用

    这个测试有很大的偏向性，
    如果各位去看看源代码的话，
    会发现有很多属性是webkit-xxx，
    这个属性是针对webkit内核的，
    而chrome就是webkit的内核。
    ie虽然在html5和css3上支持不好（特指速度），
    其他方面都是很优秀的，
    各位可以拿ie9预览版去测全部html5和css3标准（w3c提供的）项目
    会发现其实ie的支持度得分是最高的，但是速度很差。。

    Thumb up 0 Thumb down 2

  5. 哥只是个菜鸟
    2010年5月30日14:59 | #5
    回复 | 引用

    用LJ360浏览器看的效果比IE8更差 眼睛都看不见

    Thumb up 1 Thumb down 1

  6. redoasis
    2010年5月29日23:04 | #6
    回复 | 引用

    safari支持也很好啊！陰影也有，眼睛也會動。

    Thumb up 1 Thumb down 0

  7. Peetahzee
    2010年5月29日15:33 | #7
    回复 | 引用

    其实IE8的哆啦A梦是很可爱的。

    Thumb up 0 Thumb down 1

  8. KevinT
    2010年5月29日14:07 | #8
    回复 | 引用

    不管怎么说IE系列都很落后，acid3也就可怜的20分

    Thumb up 1 Thumb down 0

  9. 米迦勒
    2010年5月29日13:57 | #9
    回复 | 引用

    我说今天怎么突然很多人follow我的推特，原来老大把文章贴到这里了^^

    Thumb up 1 Thumb down 0

  10. xslidian
    2010年5月29日13:20 | #10
    回复 | 引用

    @Wick:
    那些是草案里的用法 太超前了 其他内核连提案都没准备 自然没有提供属性了

    Thumb up 1 Thumb down 0

  11. Wick
    2010年5月29日13:14 | #11
    回复 | 引用

    @xslidian:
    但是最终最终选择了 -webkit 而非 --moz 属性。你并没有提供其他选择呢。

    Thumb up 0 Thumb down 0

  12. 骨头
    2010年5月29日13:10 | #12
    回复 | 引用

    @xslidian:
    但是眼睛的动画只有-webkit却没有-moz
    难道-moz没有animate吗

    Thumb up 0 Thumb down 0

  13. citydog
    2010年5月29日13:09 | #13
    回复 | 引用

    偏向是有点，不过圆角这一说，IE一点优势都没有~~

    Thumb up 0 Thumb down 0

  14. 帝霸戈
    2010年5月29日12:55 | #14
    回复 | 引用

    IE还是很强的，CSS不光写出了多啦A梦，还写出了多啦A梦的车祸现场，所以IE友情提示：“请避免醉驾”

    Thumb up 0 Thumb down 0

  15. xslidian
    2010年5月29日12:48 | #15
    回复 | 引用

    @xixi:
    完全公平
    -webkit 的附近也有相应的 -moz 和无前缀的属性
    原作者只是为了同时说明属性在各内核的用法才加上的

    Thumb up 0 Thumb down 0

  16. xslidian
    2010年5月29日12:44 | #16
    回复 | 引用
  17. William Fan
    2010年5月29日12:15 | #17
    回复 | 引用

    可能吧 吧主Jason老大 做过一个更详细的介绍页面 http://knb.im/css3/

    Thumb up 0 Thumb down 0

  18. JuestChaOS
    2010年5月29日12:07 | #18
    回复 | 引用

    另外这几天 谷奥极力推荐的 cache 和 搜索 ssl 脚本
    我认为不是很合理，之前在 谷奥 分别讲述这两个的时候，
    我就在底下留言时说过了
    cache 和 Google 的 webhistory 配合出一个脚本是最佳的
    比如这个 http://userscripts.org/scripts/show/74154

    Thumb up 0 Thumb down 0

  19. JuestChaOS
    2010年5月29日11:37 | #19
    回复 | 引用

    @肥怕怕:
    感谢感谢，我居然看到了自己编辑的囧文被留言到了 谷奥，荣幸啊~

    Thumb up 0 Thumb down 0

  20. Pb
    2010年5月29日11:23 | #20
    回复 | 引用

    IE 9 Preview下面浏览机器猫页面的效果 http://img.ly/1ndo

    Thumb up 0 Thumb down 0

  21. 彩林
    2010年5月29日11:23 | #21
    回复 | 引用

    感觉哆啦A梦永远在心中

    Thumb up 0 Thumb down 0

  22. C.M
    2010年5月29日11:15 | #22
    回复 | 引用
  23. 肥怕怕
    2010年5月29日11:00 | #23
    回复 | 引用

    有点旧的新闻了，主要是另一篇质疑的文章都出来好几天了: http://www.evolife.cn/?p=50449

    Thumb up 0 Thumb down 0

  24. SWX
    2010年5月29日10:59 | #24
    回复 | 引用

    safari 也是全部支持。

    Thumb up 0 Thumb down 0

  25. wzyboy
    2010年5月29日10:53 | #25
    回复 | 引用

    源代码里好多属性都是-webkit专用的属性，这个测试就是为Webkit浏览器设计的嘛……

    不过可怜的IE是没有专有属性的……悲剧

    Thumb up 1 Thumb down 0

  26. 紫陌寒
    2010年5月29日10:36 | #26
    回复 | 引用

    佩服，CSS3还没怎么用呢

    Thumb up 0 Thumb down 0

  27. xixi
    2010年5月29日10:30 | #27
    回复 | 引用

    看看源代码 好多-webkit的属性

    这种比对并不公平

    Thumb up 0 Thumb down 0

  28. 微醺漂移
    2010年5月29日09:54 | #28
    回复 | 引用

    很好很强大，IE说最近我们想扁哆啦A梦，嘿嘿！

    Thumb up 0 Thumb down 0

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
首次留言需审核，之后不会再审核。由于缓存机制您的留言可能不会立即显示出来，请稍后刷新本页面

您可以直接点击别人评论右侧的回复，这样您的回复评论将同时发到原作者信箱