威言威语

我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!
威言威语
当前位置: 首页 > 设计 > 正文

CSS3 Google Android小机器人

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

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

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

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

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 | 威言威语

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

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

  1. avatar
    33楼

    IE下的旋转都不好额

    2012-03-04 21:15 回复
    • avatar
      William Google Chrome Windows

      IE对CSS3支持不是很好的。

      2012-03-05 11:53 回复
  2. avatar
    32楼

    哈哈我在ie下看不太爽

    2011-03-06 19:50 回复
    • avatar

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

      2011-03-06 21:56 回复
  3. avatar
    31楼

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

    2011-01-07 18:35 回复
    • avatar
      William Mozilla Firefox Windows

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

      2011-01-08 18:51 回复

发表评论

avatar

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

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

快捷键:Ctrl+Enter