通过样式代码，能绘制出小黄人卡通图形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小黄人</title>
<link rel="stylesheet" href="css/xhr.css">
</head>
<body>
<div class="wrap">
<!-- 头发 -->
<div class="xhr_hair">
<div class="xhr_hair1"></div>
<div class="xhr_hair2"></div>
</div>
<!-- 身体 -->
<div class="xhr_body">
<!-- 眼睛 -->
<div class="xhr_eyes">
<div class="xhr_eyesl">
<div class="xhr_eyesl_black"></div>
<div class="xhr_eyesl_witer"></div>
</div>
<div class="xhr_eyesr">
<div class="xhr_eyesr_black"></div>
<div class="xhr_eyesr_witer"></div>
</div>
</div>
<!-- 嘴巴 -->
<div class="xhr_mouth"></div>
<!-- 裤子 -->
<div class="xhr_trousers">
<!-- 裤子上部分 -->
<div class="xhr_trousers_t">
<!-- 肩带 -->
<div class="t_l_belt"></div>
<div class="t_r_belt"></div>
</div>
<!-- 裤子下部分 -->
<div class="xhr_trousers_b"></div>
</div>
</div>
<!-- 手臂 -->
<div class="xhr_hand">
<div class="xhr_hand_l"></div>
<div class="xhr_hand_r"></div>
</div>
<!-- 脚 -->
<div class="xhr_foot">
<div class="xhr_foot_l"></div>
<div class="xhr_foot_r"></div>
</div>
</div>
</body>
</html>.wrap {
width: 400px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
position: relative;
}
/*设定小黄人高度*/
.xhr_body {
height: 400px;
width: 250px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%); /*上下居中*/
left: 50%;
background-color: yellow;
border: 5px solid #000;
border-radius: 125px;
overflow: hidden; /*身体定义了溢出隐藏*/
}
/*定位头发 两根头发都在一个hair的盒子里 可以先把两根头发叠在一起造
型，然后利用hair盒子定位后使用top定位*/
.xhr_hair1,.xhr_hair2 {
height: 100px;
width: 130px;
/*border-left: 10px solid #000;*/
border-top: 10px solid #000;
border-radius: 50%;
position: absolute;
animation: hair 5s ease-in infinite; /* 头发动画*/
}
@keyframes hair {
10%,50%,100% {
transform: rotate(40deg);
}
20% {
transform: rotate(45deg);
}
80% {
transform: rotate(45deg);
}
}
.xhr_hair {
position: absolute;
top: 7px;
}
.xhr_hair1 {
left: 98px;
top: 60px;
transform: rotate(40deg);
}
.xhr_hair2 {
left: 100px;
top: 73px;
transform: rotate(40deg);
}
/*手臂*/
.xhr_hand_l,.xhr_hand_r {
height: 100px;
width: 100px;
border: 5px solid #000;
position: absolute;
border-radius: 30px;
z-index: -1;
background: yellow;
}
.xhr_hand_l {
left: 50px;
top: 300px;
transform: rotate(120deg);
}
.xhr_hand_r {
top: 300px;
right: 50px;
transform: rotate(-120deg);
}
.xhr_hand_l::after,.xhr_hand_r::after {
content: "";
position: absolute;
height: 10px;
width: 50px;
background: #000;
border-radius: 5px;
}
.xhr_hand_l::after {
left: 30px;
top: 73px;
}
.xhr_hand_r::after {
/*left: 20px;*/
right: 30px;
top: 73px;
}
/*腿部*/
.xhr_foot_l,.xhr_foot_r {
height: 60px;
width: 40px;
background: #000;
position: absolute;
z-index: -1;
}
.xhr_foot_l {
left: 150px;
bottom: 50px;
}
.xhr_foot_r {
right: 150px;
bottom: 50px;
}
.xhr_foot_l::after,.xhr_foot_r::after {
content: "";
height: 40px;
width: 60px;
background: #000;
border-radius: 20px;
position: absolute;
top: 20px;
}
.xhr_foot_l::after {
left: -35px;
}
.xhr_foot_r::after {
right: -35px;
}
/*眼睛*/
.xhr_eyes {
/*border: 1px solid red;*/
position: absolute;
top: 60px;
left: 25px; /*不给父元素定宽高，直接用定位计算出左边距，然后利用子元素撑开高*/
}
.xhr_eyesl,.xhr_eyesr {
width: 90px;
height: 90px;
border-radius: 50%;
border: 5px solid #000;
float: left;
background: #fff;
}
.xhr_eyesl::after,.xhr_eyesr::after {
content: "";
width: 30px;
height: 20px;
background: #000;
position: absolute;
top: 28px;
}
.xhr_eyesl::after {
left: -25px;
/*top: 28px;*/
transform: rotate(20deg);
}
.xhr_eyesr::after {
right: -25px;
transform: rotate(-20deg);
}
/*眼睛内部*/
.xhr_eyesl_black,.xhr_eyesr_black {
height: 50px;
width: 50px;
background: #000;
border-radius: 50%;
position: absolute;
top: 25px;
animation: blackeyes 5s ease-in infinite; /* 黑眼珠动画*/
}
@keyframes blackeyes {
10%,50%,100% {
transform: translate(0);
}
20% {
transform: translate(16px);
}
80% {
transform: translate(-16px);
}
}
.xhr_eyesl_black {
left: 25px;
}
.xhr_eyesr_black {
right: 25px;
}
.xhr_eyesl_witer,.xhr_eyesr_witer {
height: 20px;
width: 20px;
position: absolute;
background: #fff;
border-radius: 50%;
top: 40px;
animation: witer 5s ease-in infinite;
}
@keyframes witer {
10%,50%,100% {
transform: translate(0);
}
20% {
transform: translate(16px,5px); /* x,y轴同时运动*/
}
80% {
transform: translate(-16px,5px);
}
}
.xhr_eyesl_witer {
left: 50px;
}
.xhr_eyesr_witer {
right: 50px;
}
/*嘴巴 使用两个盒子叠加*/
.xhr_mouth {
height: 35px;
width: 60px;
background-color: #FFF;
border-radius: 0 0 0 30px;
position: absolute;
top: 200px;
left: 90px;
border: 5px solid #000;
transform: rotate(-30deg);
}
.xhr_mouth::after {
content: "";
height: 39px;
width: 82px;
left: 1px;
background: yellow;
position: absolute;
transform: rotate(30deg);
border-bottom: 5px solid #000;
top: -21px;
}
/*裤子*/
.xhr_trousers {
position: absolute;
top: 260px;
/*border: 1px solid red;*/
height: 140px;
width: 100%;
}
.xhr_trousers_t {
height: 50px;
width: 150px;
background: blue;
border: 5px solid #000;
position: absolute;
/*left: 45px; */
left: 50%;
transform: translate(-50%);
border-bottom: none;
z-index: 999;
}
.xhr_trousers_b {
width: 100%;
height: 85px;
background: blue;
border-top: 5px solid #000;
position: absolute;
top: 50px;
}
/*裤子的肩带*/
.t_l_belt,.t_r_belt {
height: 20px;
width: 100px;
background: blue;
border: 5px solid #000;
position: absolute;
top: -24px;
}
.t_l_belt {
transform: rotate(35deg);
left: -74px;
}
.t_r_belt {
transform: rotate(-35deg);
right: -74px;
}
.t_l_belt::after,.t_r_belt::after {
content: "";
height: 10px;
width: 10px;
background: #000;
border-radius: 50%;
position: absolute;
top: 5px;
}
.t_l_belt::after {
right: 5px;
}
.t_r_belt::after {
left: 5px;
}