CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 由纯CSS打造的Android机器人

由纯CSS打造的Android机器人

CSS3教程  手机阅读
android的logo是一个有几个简单图形组成的机器人。本文的主要内容就是用纯CSS3技术和较少的HTML代码完成这个logo的绘制。

需要支持CSS3技术的浏览器来查看效果(ie9,火狐,谷歌或者opera都可)。

  1. <div class="android">
  2.     <div class="head">
  3.         <div class="eyes"></div>
  4.     </div>
  5.     <div class="body">
  6.         <div class="arms"></div>
  7.     </div>
  8. </div>
复制代码
  1. .android {
  2.     position: absolute;
  3.     left: 320px;
  4.   top: 230px;
  5. }
  6. /**** BODY ****/
  7. .body {
  8.     width: 336px;
  9.     height: 285px;
  10.     background-color: #A5C63B;
  11.     border-radius: 0px 0px 30px 30px;
  12.     position: absolute;
  13. }
  14. .body:before,
  15. .body:after {
  16.     background-color: #A5C63B;
  17.     content: '';
  18.     width: 75px;   
  19.     height: 122px;
  20.     bottom: -122px;
  21.     position: absolute;
  22.     border-radius: 0px 0px 50px 50px;
  23. }
  24. .body:before { left: 68px; }
  25. .body:after{ right: 68px; }
  26. /**** HEAD ****/
  27. .head {
  28.     width: 336px;
  29.     height: 155px;
  30.     background-color: #A5C63B;
  31.     border-radius: 200px 200px 0px 0px;
  32.     position: absolute;
  33.     top: -170px;
  34. }
  35. .head:before,
  36. .head:after {
  37.     background-color: #A5C63B;
  38.     content: '';
  39.     width: 10px;   
  40.     height: 53px;
  41.     position: absolute;
  42.     top: -30px;
  43.     border-radius: 20px 20px 0px 0px;
  44. }
  45. .head:after { -webkit-transform: translate(63px, 0px) rotate(-30deg); -moz-transform:translate(63px, 0px) rotate(-30deg); -o-transform:translate(63px, 0px) rotate(-30deg);  }
  46. .head:before{ -webkit-transform: translate(255px, 0px) rotate(30deg); -moz-transform:translate(255px, 0px) rotate(30deg); -o-transform:translate(255px, 0px) rotate(30deg);  }
  47. /**** ARMS ****/
  48. .arms:before,
  49. .arms:after {
  50.     background-color: #A5C63B;
  51.     content: '';
  52.     width: 75px;   
  53.     height: 233px;
  54.     top: -8px;
  55.     position: absolute;
  56.     border-radius: 40px 40px 40px 40px;  
  57. }
  58. .arms:before { left: -90px; }
  59. .arms:after{ right: -90px; }
  60. /**** EYES ****/
  61. .eyes:before,
  62. .eyes:after {
  63.     background-color: #FFFFFF;
  64.     content: '';
  65.     width: 27px;   
  66.     height: 27px;
  67.     top: 68px;
  68.     position: absolute;
  69.     border-radius: 20px;
  70. }
  71. .eyes:before { left: 78px; }
  72. .eyes:after{ right: 78px; }
复制代码


转载本文需注明转自HTML5中国

【由纯CSS打造的Android机器人】相关文章

1. 由纯CSS打造的Android机器人

2. 创意无限:纯CSS打造各种形状钻石

3. HTML5和jQuery打造的3D相册

4. JavaScript+HTML5打造的开源Timeline

5. 施密特用早期Android手机批驳乔布斯Android抄袭论

6. 2014谷歌I/O大会:八大新品重磅发布 打造全方位Android生态圈

7. CSS3教程:background-clip和background-origin

8. 苹果称Kindle Fire加剧Android平台碎片化

9. Android 4.0 Ice Cream Sandwich中的彩蛋

10. 釜底抽薪:微软让所有Android和iOS用户在浏览器内也能体验Windows Phone ...

本文来源:https://www.51html5.com/a881.html

点击展开全部
上一篇:关于CSS3 Transitions的小例子 下一篇:纯CSS实现的3D简洁按钮设计

﹝由纯CSS打造的Android机器人﹞相关内容

「由纯CSS打造的Android机器人」相关专题

android 机器人 css
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢