威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

CSS3 Google Android小机器人

用CSS3写的Google Android小机器人,主要是border-radius和box-shadow的应用,同时加入了JQuery控制弹出层。
CSS3 Google Android小机器人

虽然时下大家最关注的手机还是iPhone4,不过对我来说不大感冒,太贵了,买不起。相对而言我还是想买个Android系统的手机,那个价格还是接受,虽然现在我也没钱买。

Android系统的标志是一个可爱的小机器人,好久没怎么系统的写CSS3了,于是用CSS3画了一个小机器人,正好再熟悉下CSS3,都有点小小的遗忘了。

花了2个小时完成了小机器人,感觉不错。先预览下。演示请点击:

Chrome,FireFox,Opera,Safari下的效果:

CSS3 Google Android小机器人

刚写好的时候用IE6看了下,歪七歪八的看着真蛋疼。

未Hack前IE6下Android小机器人

最后实在忍不住,稍稍Hack了下IE6,使IE下效果基本类似下面这样,稍稍好看点。

IE下Android小机器人

当你点击小机器人的时候会有个气泡型的对话框,再点击就消失。是CSS3写的,加了点Jquery的效果。这个还有些Bug,就是定位问题,始终没有能按我的想法定位,position:absolute;和position:relative;的混合应用上面还没有能控制好,最后就让IE6,IE7错位了,IE8,Chrome,FireFox,Opera,Safari勉强正常了点显示出来。

气泡的内阴影问题,box-shadow:inset 0 0 5px #b0ce5a; FireFox和Opera能正常显示,而Chrome则不行,Chrome是支持box-shadow,难道是inset的问题?

有时间我还有再研究研究,有谁有好方法的麻烦告诉我下。

您可能还会对这些文章感兴趣!

CSS3 Google Android小机器人:目前有 73 条评论

  1. ah伤星
    33楼
    ah伤星:Google Chrome 17.0.963.56 Windows 7

    IE下的旋转都不好额

    2012-03-04 21:15 回复
  2. Paran
    32楼
    Paran:Internet Explorer 8.0 Windows 7

    哈哈我在ie下看不太爽

    2011-03-06 19:50 回复
    • Prouz
      Prouz:傲游浏览器 3.0 Windows 7

      @Paran悲剧~~ 建议换傲游、Chrome、Safari、火狐、Opera~~

      2011-03-06 21:56 回复
  3. frogsky
    31楼
    frogsky:Google Chrome 8.0.552.224 Windows XP

    顶一下,没想到还有他人也蛋疼,这个是我先前写的,只是最近才公布出来,百度一下居然找到这里来喝喝。。。我的ANDROID CSS3:http://www.frogsky.com/works/android.html

    2011-01-07 18:35 回复
    • William
      WilliamFirefox 3.6.13 Windows XP

      @frogsky哈哈。
      你那个机器人的触角好像只考虑的Chrome。
      FireFox和Opera没有考虑哦~

      2011-01-08 18:51 回复
  4. song
    30楼
    song:世界之窗浏览器 Windows XP

    用7610的都是有钱人呢,我那时候只能买山寨机,刚换了71不到一年,看到N8出来了,刚想去玩N8,上个礼拜朋友聚会,一大帮的N9,国内市场竟然还没有呢,追风永远追不上,觉得7610有点WEB2.0的范儿呢,圆角,不细看还有点水滴的感觉,呵呵

    2010-12-23 23:04 回复
    • William
      WilliamInternet Explorer 8.0 Windows 7

      @song晕,7610早就淘汰的不知到哪里去了。现在手机软件都不做S60V2的了。
      其实7610的式样确实不错,现在Nokia手机设计太丑,不晓得是不是设计师换了。
      好久不关注Nokia了,现在关注Android系统的手机。哈哈

      2010-12-24 22:26 回复
  5. 夏小君
    29楼
    夏小君:枫树极速浏览器 1.5.1.1 Windows XP

    时下关注M9了。哈哈~感觉首页最下面的友情链接有点别扭。好像有点不协调,但是我还没想到修改意见。嘻嘻。。

    2010-12-21 09:04 回复
    • William
      WilliamFirefox 3.6.13 Windows 7

      @夏小君呵呵,下面的链接用IE内核的看是别扭的,用支持CSS3的浏览器看就好多了,我加了圆角和阴影了

      2010-12-21 21:40 回复
  6. 牛在天
    28楼
    牛在天:Firefox 3.6.13 Windows XP

    话说CSS3连机器猫都可以做出来呢。这个现在还没有普及,关键浏览器IE支持的不好。

    2010-12-19 17:39 回复
  7. Kinroc
    27楼
    Kinroc:Internet Explorer 8.0 (Compatibility Mode) Windows Server 2003

    貌似现在还有不少用IE6的。。。

    2010-12-17 12:52 回复
  8. Jungle
    26楼
    Jungle:Google Chrome 9.0.589.0 Windows XP

    可以下载一个ANDROID模拟器玩玩啊,除了不能打电话发短信,其他功能都可以用

    2010-12-16 00:26 回复
  9. 苏扬
    25楼
    苏扬:Google Chrome 8.0.552.215 Windows 7

    IE6太变态了,见过很多人都拿着个做文章,看来IE6命不久矣!

    2010-12-15 13:23 回复
    • William
      WilliamInternet Explorer 8.0 Windows 7

      @苏扬在中国还早呢,40%以上的浏览器还是IE6内核的。FireFox,Chrome之类根本不知为何物。

      2010-12-15 21:11 回复
  10. feln
    24楼
    feln:Internet Explorer 6.0 Windows XP

    你还能买起Android系统的手机,俺连这个也买不起,不过偶觉得时下大多数人崇拜IPHONE4有点过了

    2010-12-15 10:58 回复
    • William
      WilliamInternet Explorer 8.0 Windows 7

      @feln也买不起Android的。我还在期盼着呢,那个iPhone4我还没有奢望呢。

      2010-12-15 21:10 回复
  11. 竹海听涛
    23楼
    竹海听涛:Internet Explorer 8.0 Windows XP

    还是先用着 刘三姐吧…….

    2010-12-15 09:32 回复
  12. Nunki
    22楼
    Nunki:Firefox 3.6.13 Windows 7

    会写CCS真好!不过中间那个还蛮艺术的

    2010-12-15 01:13 回复
  13. 任侠
    21楼
    任侠:Internet Explorer 8.0 (Compatibility Mode) Windows 7

    玩的不错,不过IE6下的样子好丑,哈哈

    2010-12-14 23:20 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry