这篇文章主要讲解了“怎么用css写个android机器人”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用css写个android机器人”吧！
代码如下:
<span ></span><pre code_snippet_id="75788" snippet_file_name="blog_20131121_2_1289480" name="code" class="html"><pre code_snippet_id="75788" snippet_file_name="blog_20131121_2_1289480" name="code" class="html"><!DOCTYPE>
<html>
<head></head>
<style type="text/css">
.android{
position: absolute;
left: 500px;
top: 200px;
}
/* head */
.head{
width: 336px;
height: 155px;
background: #a5c63b;
border-radius: 200px 200px 0 0;
position: absolute;
top: -170px;
}
.head:before, .head:after{
background: #a5c63b;
content: '';
width: 10px;
height: 53px;
position: absolute;
top: -30px;
border-radius: 20px 20px 0 0;
}
.head:before{
-webkit-transform: translate(255px, 0px) rotate(30deg);
-moz-transform:translate(255px, 0px) rotate(30deg);
-o-transform:translate(255px, 0px) rotate(30deg);
}
.head:after{
-webkit-transform: translate(63px, 0px) rotate(-30deg);
-moz-transform: translate(63px, 0px) rotate(-30deg);
-o-transform: translate(63px, 0px) rotate(-30deg);
}
/* eyes */
.eyes:before, .eyes:after{
background: #fff;
content: '';
width: 27px;
height: 27px;
top: 68px;
position: absolute;
border-radius: 20px;
}
.eyes:before{
left: 78px;
}
.eyes:after{
right: 78px;
}
/* body */
.body{
width: 336px;
height: 285px;
background: #a5c63b;
border-radius: 0px 0px 30px 30px;
position: absolute;
}
.body:before, .body:after{
background: #a5c63b;
content: '';
width: 75px;
height: 122px;
bottom: -122px;
position: absolute;
border-radius: 0 0 50px 50px;
}
.body:before{
left: 68px;
}
.body:after{
right: 68px;
}
/* arms */
.arms:before, .arms:after{
background: #a5c63b;
content: '';
width: 75px;
height: 233px;
top:-8px;
position: absolute;
border-radius: 40px;
}
.arms:before{
left: -90px;
}
.arms:after{
right: -90px;
}
</style>
<body>
<div class="android">
<div class="head">
<div class="eyes"></div>
</div>
<div class="body">
<div class="arms"></div>
</div>
</div>
</body>
</html></pre>
<pre></pre>
<pre></pre>
<p></p>
<pre></pre>
<pre></pre>
<p></p>
<p>
</p>
<pre></pre>
<pre></pre>
<pre></pre>
<pre></pre>
</pre>
感谢各位的阅读，以上就是“怎么用css写个android机器人”的内容了，经过本文的学习后，相信大家对怎么用css写个android机器人这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
