转载

CSS绘制Android Robot

置顶文章：《纯CSS打造银色MacBook Air（完整版）》

上一篇：《Canvas模拟粒子系统》

作者主页：myvin

博主QQ： 851399101 （点击QQ和博主发起临时会话）

正文

用css绘制的Android Robot，比较简单，主要用了position，还有rotate和translete属性。因为简单就不说了。先上效果图，再直接上代码。

实时效果图和代码也可以点击这里到 codepen 上查看。

效果如如下：

[效果图]（ http://images.cnblogs.com/cnblogs_com/myvin/710118/o_robot%20android.png）

代码

HTML Markup

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Android robot</title>  <link rel="stylesheet" href="./android.css"> </head> <body>  <div class="android">   <div class="head">    <div class="eyes"></div>   </div>   <div class="body">    <div class="arms"></div>   </div>  </div> </body> </html>

CSS Code

body{  background-color: #444444;  margin:0 auto;  padding:0 auto; } .android{  position: relative;  margin-top:210px;  margin-left:200px; } .body{  position: absolute;  width: 336px;  height: 285px;  background: #00cc00;  border-radius: 0px 0px 40px 40px; } .body:before,.body:after{  content: '';  width: 75px;  height: 122px;  background: #00cc00;  position: absolute;  bottom: -122px;  border-radius:0px 0px 20px 20px; } .body:before{left:70px;} .body:after{right:70px;} .head{  width: 336px;  height:155px;  border-radius:300px 300px 0px 0px;  background: #00cc00;  position: absolute;  top: -175px; } .head:before,.head:after{  content:'';  width: 10px;  height: 53px;  background: #00cc00;  position: absolute; } .head:before{-webkit-transform:translate(60px,0px) rotate(-30deg);} .head:after{-webkit-transform:translate(276px,0px) rotate(30deg);} .eyes:before,.eyes:after{  content: '';  width: 27px;  height: 27px;  border-radius:27px 27px 27px 27px;  background: white;  position: absolute; } .eyes:before{left: 85px;top: 50px;} .eyes:after{right: 85px;top: 50px;} .arms:before,.arms:after{  content: '';  width: 75px;  height: 233px;  background: #00cc00;  border-radius: 75px 75px 75px 75px;  position: absolute; } .arms:before{left: -90px;} .arms:after{right:-90px;}

正文到此结束