css练习——绘制安卓机器人
一个学校里BBS的学长的布置的小练习 (￣ ‘i ￣;)
用css画一个安卓机器人
效果如下
虽然有点丑……
不管啦 (*￣rǒ￣)
接下来是相关的步骤
- 画身体
- 画jiojio
- 画头
- 画手手
- 画眼睛
- 画天线（耳朵）
总体概述
写这个用到的知识有css盒子模型，position定位，伪类选择器，图像的旋转
上代码！
<body>
<div class="android">
<div class="a_ears"></div>
<div class="a_head">
<div class="a_eyes"> </div>
</div>
<div class="a_body">
<div class="a_arms"> </div>
</div>
</div>
</body>
这是在body中部署的架构
画身体
- 先把基本工作做好
<title>安卓机器人</title>
<style type='text/css'>
*{
/*将所有的margin和padding归零，养成好习惯*/
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body{
height: 100%;
background-color: black;
}
- 画身体
.android{
/* 相对定位 */
/*考虑到机器人内部的元素要相互重叠，所以使用了相对定位，让内部元素在使用绝对定位的时候以android层的左上角作为参考点*/
position: relative;
/*离body层的边缘*/
left: 320px;
top: 230px;
}
.a_body{
position:absolute;
width: 150px;
height: 150px;
background-color: green;
border-radius: 0 0 20px 20px;
}
画脚脚
.a_body:after,.a_body:before{
/*伪类选择器:after,:before*/
background-color: green
/*绝对定位*/
position: absolute;
/*设置圆角
从左到右为从矩形的左上角开始，然后顺时针设置*/
border-radius: 0 0 7px 7px;
height: 67px;
width: 20px;
/*以a_body整体参考点*/
/*这个读者可以多改变一下试一试就能理解辽要是超出a_body范围的话就是负值*/
bottom: -67px;
/*必须加*/
content:'';
}
/*上一步的设置这两个脚脚已经重叠了，下面要让这两个错开*/
.a_body:before{
/*同样以脚的上一级元素a_body整体参考点*/
left:20px;
}
.a_body:after{
right:20px;
}
画头
.a_head{
position: absolute;
/*头是个半圆，所以要将高度设置为宽度的一半*/
width: 150px;
height: 75px;
background-color: green;
/*头的左上角离他的上一级的高度*/
top:-85px;
/*左上右上角为圆角值*/
border-radius:75px 75px 0 0;
}
画手手
.a_arms:before,.a_arms:after{
background-color:green;
/*同样必须加*/
content:'';
width:20px;
height:80px;
top:30px;
position:absolute;
border-radius:7px;
}
.a_arms:before{
left: -30px;
}
.a_arms:after{
right: -30px;
}
画眼睛
.a_eyes:before, .a_eyes:after{
background-color: white;
content: '';
width: 20px;
height: 20px;
position:absolute;
/*因为要画的是一个圆所以参数设置为高度（宽度和高度一致）的一半就可*/
border-radius: 50%;
top:34px;
}
.a_eyes:after{
right: 30px;
}
.a_eyes:before{
left: 30px;
}
画天线（耳朵）
.a_ears:before,.a_ears:after{
background-color: green;
content: '';
width: 10px;
height: 45px;
position:absolute;
border-radius: 5px;
top:-105px;
}
.a_ears:before{
left: 15px;
/*旋转，默认的中点是耳朵的左上角*/
/*默认顺时针是正值，负值就是逆时针啦*/
transform: rotate(-30deg);
}
.a_ears:after{
left: 125px;
transform: rotate(30deg);
}
最后一个安卓小机器人就大功告成辽 ヽ(✿ﾟ▽ﾟ)ノ
