CSS3 Google Android小机器人-威言威语

CSS3 Google Android小机器人

William2010-12-13 01:05设计14,124次阅读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的问题？

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

本文固定链接: https://www.weisay.com/blog/css3-google-android-robot.html | 威言威语

赏

【上一篇】WordPress代码高亮插件SyntaxHighlighter Evolved的行号问题
【下一篇】突然间的降雪

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

33楼
ah伤星：

IE下的旋转都不好额

2012-03-04 21:15 回复
- William文章作者：
  
  IE对CSS3支持不是很好的。
  
  2012-03-05 11:53 回复
32楼
Paran：

哈哈我在ie下看不太爽

2011-03-06 19:50 回复
- Prouz：
  
  悲剧~~ 建议换傲游、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文章作者：
  
  哈哈。
  你那个机器人的触角好像只考虑的Chrome。
  FireFox和Opera没有考虑哦~
  
  2011-01-08 18:51 回复