安卓小人html制作,安卓小人.html

安卓小绿人

*{

margin: 0;

padding: 0;

}

body {

background-color: darkolivegreen;

}

.all {

width: 800px;

height: 800px;

border: 1px solid #ccc;

margin: 50px auto;

}

.ear {

width: 300px;

height: 150px;

position: relative;

margin: 0 auto;

}

.ear::before,

.ear::after {

content: "";

position: absolute;

width:20px;

height: 120px;

border-radius: 10px 10px 0 0;

background-color: yellowgreen;

}

.ear::before {

transform: rotate(-45deg);

left: 20px;

top: 130px;

}

.ear::after {

transform: rotate(45deg);

right: 20px;

top: 130px;

}

.head {

width: 300px;

height: 150px;

background-color: yellowgreen;

margin: 15px auto;

border-radius: 150px 150px 0 0;

position: relative;

}

/* 使用伪元素添加眼睛 */

.head::before,

.head::after{

/*1.一定设置content属性*/

content: '';

/*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素 float display position*/

position: absolute;

width: 25px;

height: 25px;

border-radius: 50%;

background-color: #fff;

bottom: 45px;

}

.head::before{

left: 80px;

}

.head::after{

right: 80px;

}

.body {

width: 300px;

height: 300px;

background-color:yellowgreen;

border-radius: 0 0 25px 25px;

margin: 0 auto;

position: relative;

}

.body::before,

.body::after{

content: "";

position: absolute;

background-color: yellowgreen;

height: 200px;

width: 40px;

top: 30px;

border-radius: 15px;

}

.body::before{

left: -50px;

}

.body::after{

right: -50px;

}

.foot{

width: 300px;

height: 150px;

position: relative;

margin: 0 auto;

}

.foot::before,

.foot::after{

content: '';

position: absolute;

top: 0px;

background-color:yellowgreen;

width: 40px;

height: 100px;

border-radius: 0 0 15px 15px;

}

.foot::before{

left: 60px;

}

.foot::after{

right: 60px;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史