<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小黄人</title>
<style type="text/css">
/*设定容器样式*/
.wrap{
width: 400px;
height: 600px;
border: 1px solid red;
margin:10px auto;
position: relative;
}
/*设身体样式*/
.xhr_body{
width: 250px;
height: 400px;
border: 5px solid #000;
border-radius: 120px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: yellow;
overflow: hidden;
}
/*头发的样式*/
.xhr_hair_1,.xhr_hair_2{
width: 130px;
height: 100px;
border-top:10px solid #000;
border-radius: 50%;
position: absolute;
}
.xhr_hair_1{
left: 100px;
top:80px;
transform: rotate(40deg);
}
.xhr_hair_2{
left: 100px;
top:70px;
transform: rotate(40deg);
}
/*制作手臂*/
.xhr_hand_l,.xhr_hand_r{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
border: 5px solid #000;
border-radius: 30px;
z-index: -1;
}
.xhr_hand_l{
left: 50px;
top: 300px;
transform: rotate(30deg);
}
.xhr_hand_r{
right: 50px;
top: 300px;
transform: rotate(-30deg);
}
/*手臂黑点的制作*/
.xhr_hand_l::after,.xhr_hand_r::after{
content: "";
width: 50px;
height: 10px;
background: #000;
border-radius: 10px;
position: absolute;
}
.xhr_hand_l::after{
left: -3px;
top:50px;
transform: rotate(-90deg);
}
.xhr_hand_r::after{
right: -3px;
top: 50px;
transform: rotate(-90deg);
}
/*制作小黄人的腿*/
.xhr_footer_l,.xhr_footer_r{
width: 40px;
height: 60px;
background: #000;
position: absolute;
}
.xhr_footer_l{
left: 155px;
top: 500px;
}
.xhr_footer_r{
right: 155px;
top: 500px;
}
/*制作小黄人的脚*/
.xhr_footer_l::after,.xhr_footer_r::after{
content: "";
width:60px;
height: 40px;
background: #000;
border-radius:20px;
position: absolute;
}
.xhr_footer_l::after{
left: -40px;
top: 20px;
}
.xhr_footer_r::after{
right: -40px;
top: 20px;
}
/*制作眼镜*/
.xhr_eyes{
position: absolute;
left: 25px;
top: 60px;
}
.xhr_eyes_l,.xhr_eyes_r{
width: 90px;
height: 90px;
border: 5px solid #000;
border-radius: 50%;
background: white;
float: left;
}
.xhr_eyes_l::after,.xhr_eyes_r::after{
content: "";
width: 30px;
height: 20px;
background: #000;
position: absolute;
}
.xhr_eyes_l::after{
left: -25px;
top: 30px;
transform: rotate(20deg);
}
.xhr_eyes_r::after{
right: -25px;
top: 30px;
transform: rotate(-20deg);
}
/*制作眼珠*/
.xhr_l_black,.xhr_r_black{
width:50px;
height:50px;
border-radius: 50%;
background: #000;
position: absolute;
}
.xhr_l_black{
left:25px;
top:25px;
}
.xhr_r_black{
left:125px;
top:25px;
}
/*白眼珠样式设定*/
.xhr_l_white,.xhr_r_white{
width:20px;
height:20px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.xhr_l_white{
left:50px;
top:40px;
}
.xhr_r_white{
left:130px;
top:40px;
}
/*制作小黄人的嘴巴*/
.xhr_mouth{
width: 60px;
height: 35px;
border:5px solid #000;
border-radius: 0 0 0 30px;
background: #fff;
position: absolute;
left: 89px;
top: 180px;
transform: rotate(-30deg);
}
.xhr_mouth::after{
content: "";
width: 81px;
height: 40px;
background: yellow;
position: absolute;
border-bottom: 5px solid #000;
top:-23px;
left: 1px;
transform: rotate(30deg);
}
/*制作裤子*/
.xhr_trousers{
position: absolute;
top:290px;
}
.xhr_trousers_t{
width: 150px;
height: 50px;
background: blue;
border:5px solid #000;
border-bottom: none;
position: absolute;
left: 45px;
top:-40px;
z-index:999;
}
.xhr_trousers_b{
width: 250px;
height: 100px;
background: blue;
border:5px solid #000;
position: absolute;
top: 10px;
}
/*肩带的设定*/
.t_l_belt,.t_r_belt{
width: 100px;
height: 20px;
background: blue;
border: 5px solid #000;
position: absolute;
}
.t_l_belt{
left: -79px;
top: -20px;
transform: rotate(30deg);
}
.t_r_belt{
right: -79px;
top: -20px;
transform: rotate(-30deg);
}
.t_l_belt::after,.t_r_belt::after{
content: "";
width:10px;
height: 10px;
background: #000;
border-radius: 50%;
position: absolute;
}
.t_l_belt::after{
left: 82px;
top: 5px;
}
.t_r_belt::after{
left: 10px;
top:5px;
}
/*给眼睛做动画*/
.xhr_l_black,.xhr_r_black{
animation: blackEyes 5s ease-in infinite;
/* 绑定动画的属性 动画名称 动画完成时间 曲线速度（低速开始） 循环次数（一直循环） */
}
@keyframes blackEyes{
20%,50%,60%,100%{
transform: translate(0);
}
30%,40%{
transform: translate(15px);
}
70%,80%{
transform: translate(-15px);
}
}
/*白眼珠的运动*/
.xhr_l_white,.xhr_r_white{
animation: whiteEyes 5s ease-in infinite;
}
@keyframes whiteEyes{
20%,50%,60%,100%{
transform: translate(0);
}
30%,40%{
transform: translate(15px,4px);
}
70%,80%{
transform: translate(-15px,4px);
}
}
/*头发的动画*/
.xhr_hair_1,.xhr_hair_2{
animation: hair 5s ease-in infinite;
}
@keyframes hair{
10%,20%,50%,60%,100%{
transform: rotate(40deg);
}
30%,40%{
transform: rotate(43deg);
}
70%,80%{
transform: rotate(46deg);
}
}
</style>
</head>
<body>
<!--
①容器设定及定位
②添加小黄人头发
③添加小黄人的身体
④添加小黄人眼镜
⑤添加小黄人的眼镜腿
⑥添加小黄人的眼珠
⑦添加小黄人的嘴巴
⑧添加小黄人裤子
⑨添加小换人的手臂
⑩添加小黄人的腿脚
给头发添加动画
给眼珠添加动画
-->
<div class="wrap">
<!-- 头发 -->
<div class="xhr_hair">
<div class="xhr_hair_1"></div>
<div class="xhr_hair_2"></div>
</div>
<!-- 身体 -->
<div class="xhr_body">
<!-- 眼镜 -->
<div class="xhr_eyes">
<!-- 左眼镜 -->
<div class="xhr_eyes_l">
<div class="xhr_l_black"></div>
<div class="xhr_l_white"></div>
</div>
<!-- 右眼镜 -->
<div class="xhr_eyes_r">
<div class="xhr_r_black"></div>
<div class="xhr_r_white"></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="footer">
<div class="xhr_footer_l"></div>
<div class="xhr_footer_r"></div>
</div>
</div>
</body>
</html>结果如下图:
