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;}


转载请记得说明作者和出处哦-.-
作者:myvin
原文出处:http://www.cnblogs.com/myvin/p/4780454.html

下一篇:《CSS绘制Android Robot》

置顶文章:《纯CSS打造银色MacBook Air(完整版)》

你可能感兴趣的:(CSS绘制Android Robot)