css rendering robot Andrews

css practice - drawing robot Andrews

A school seniors arrangement of BBS little practice (¯ 'i ¯;)

Andrews robot with a painting css

Results are as follows

Although a bit ugly ......

Whether it (* ¯rǒ¯)

The next step is relevant

Body painting
View jiojio
Painted head
Hand painted hand
Painted eyes
Painting antenna (ear)

General Overview

We have used this knowledge to write css box model, position location, a pseudo-class selectors, image

The Code!

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

It is deployed in the body schema

Body painting

First basic job done

<title>安卓机器人</title>
<style type='text/css'>
*{
    /*将所有的margin和padding归零，养成好习惯*/
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body{
    height: 100%;
    background-color: black;
}

Body painting

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

Legs and feet

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

Painted head

.a_head{
    position: absolute;
    /*头是个半圆，所以要将高度设置为宽度的一半*/
    width: 150px;
    height: 75px;
    background-color: green;
    /*头的左上角离他的上一级的高度*/
    top:-85px;
    /*左上右上角为圆角值*/
    border-radius:75px 75px 0 0;
}

Hand painted hand

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

Painted eyes

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

Painting antenna (ear)

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

Finally, a small robot Andrews're done Liao ヽ (✿ ゚ ▽ ゚) Techno

Joshua_yi

Released nine original articles · won praise 4 · Views 1605

Private letter concerns