CSS3 Google Android小机器人

William2010-12-13 01:05设计19,032次浏览73条评论

扫一扫手机看

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

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

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

VIEW DEMO

Chrome，FireFox，Opera，Safari下的效果：

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

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

当你点击小机器人的时候会有个气泡型的对话框，再点击就消失。是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 条评论

33楼
ah伤星：

IE下的旋转都不好额

2012-03-04 21:15 回复
- William博主：
  
  @ah伤星IE对CSS3支持不是很好的。
  
  2012-03-05 11:53 回复
32楼
Paran：

哈哈我在ie下看不太爽

2011-03-06 19:50 回复
- Prouz：
  
  @Paran悲剧~~ 建议换傲游、Chrome、Safari、火狐、Opera~~
  
  2011-03-06 21:56 回复
31楼
frogsky：

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

2011-01-07 18:35 回复
- William博主：
  
  @frogsky哈哈。
  你那个机器人的触角好像只考虑的Chrome。
  FireFox和Opera没有考虑哦~
  
  2011-01-08 18:51 回复
30楼
song：

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

2010-12-23 23:04 回复
- William博主：
  
  @song晕，7610早就淘汰的不知到哪里去了。现在手机软件都不做S60V2的了。
  其实7610的式样确实不错，现在Nokia手机设计太丑，不晓得是不是设计师换了。
  好久不关注Nokia了，现在关注Android系统的手机。哈哈
  
  2010-12-24 22:26 回复
29楼
夏小君：

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

2010-12-21 09:04 回复
- William博主：
  
  @夏小君呵呵，下面的链接用IE内核的看是别扭的，用支持CSS3的浏览器看就好多了，我加了圆角和阴影了
  
  2010-12-21 21:40 回复
28楼
牛在天：

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

2010-12-19 17:39 回复
- William博主：
  
  @牛在天恩，国内IE的占有率是很高的，N多还是IE6呢
  
  2010-12-20 18:34 回复
27楼
Kinroc：

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

2010-12-17 12:52 回复
- William博主：
  
  @Kinroc中国IE6还是很多的。
  
  2010-12-17 18:45 回复
26楼
Jungle：

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

2010-12-16 00:26 回复
- William博主：
  
  @Jungle恩，下载了，还没有搭建，一直忙的忘记了
  
  2010-12-17 18:46 回复
25楼
苏扬：

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

2010-12-15 13:23 回复
- William博主：
  
  @苏扬在中国还早呢，40%以上的浏览器还是IE6内核的。FireFox，Chrome之类根本不知为何物。
  
  2010-12-15 21:11 回复
24楼
feln：

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

2010-12-15 10:58 回复
- William博主：
  
  @feln也买不起Android的。我还在期盼着呢，那个iPhone4我还没有奢望呢。
  
  2010-12-15 21:10 回复
23楼
竹海听涛：

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

2010-12-15 09:32 回复
- William博主：
  
  @竹海听涛刘三姐是什么东东？
  
  2010-12-15 21:09 回复
  - 竹海听涛：
    
    @WilliamE63
    
    2010-12-18 17:15 回复
    - William博主：
      
      @竹海听涛为什么把E63叫刘三姐呢，我很好奇~
      
      2010-12-18 23:18 回复
22楼
Nunki：

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

2010-12-15 01:13 回复
- William博主：
  
  @Nunki难道是残缺美？哈哈
  
  2010-12-15 21:09 回复
21楼
任侠：

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

2010-12-14 23:20 回复
- William博主：
  
  @任侠IE6最杯具了，幸亏我还Hack了下，不然更丑
  
  2010-12-14 23:31 回复