Home > Article > Web Front-end > CSS绘制Android Robot_html/css_WEB-ITnose
CSS绘制Android Robot_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 13:05:011236browse
置顶文章：《纯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
原文出处：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS 魔法系列：纯 CSS 绘制图形（各种形状的砖石）_html/css_WEB-ITnoseNext article：使用Axure RP原型设计实践01,使用概述_html/css_WEB-ITnose