小黄人案例：用代码在网页显示一个小黄人，可用于加强自己对定位和动画的印象，整个代码三百多行，最终实现效果如下：
（头发和眼睛具有动画效果）
代码相关视频：
链接:https://pan.baidu.com/s/1G3fS6uAXsg-5ibUpsBjakg 提取码:3qc4 复制这段内容后打开百度网盘手机App，操作更方便哦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小黄人制作</title>
<style>
.wrap {
width: 400px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
position: relative;
}
/*设定小黄人身体*/
.xhr_body {
width: 250px;
height: 400px;
border: 5px solid #000;
border-radius: 125px;
position: absolute;
top: 50%;
left: 50%;
/*margin-top: -200px;
margin-left: -125px;*/
transform:translate(-50%,-50%);
background-color: 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(50deg);
}
.xhr_hair_2 {
left:100px;
top: 70px;
transform: rotate(50deg);
}
/*设定小黄人手臂*/
.xhr_hand_l,.xhr_hand_r {
width: 100px;
height: 100px;
border: 5px solid #000;
position: absolute;
top:300px;
border-radius: 30px;
z-index: -1;
background-color: yellow;
}
.xhr_hand_l {
left: 50px;
transform: rotate(30deg);
}
.xhr_hand_r {
right: 50px;
transform: rotate(-30deg);
}
.xhr_hand_l::after ,.xhr_hand_r:after {
content: '';
width: 30px;
height: 14px;
background-color: #000;
position: absolute;
border-radius: 5px;
top: 62px;
}
.xhr_hand_l::after {
left: 8px;
transform: rotate(90deg);
}
.xhr_hand_r::after {
right: 8px;
transform: rotate(90deg);
}
/*小黄人腿*/
.xhr_foot_l,.xhr_foot_r {
width: 40px;
height: 60px;
background: #000;
position: absolute;
bottom: 45px;
z-index: -1;
}
.xhr_foot_l {
left: 155px;
}
.xhr_foot_r {
right: 155px;
}
.xhr_foot_l::after,.xhr_foot_r::after {
content: "";
width: 60px;
height: 40px;
background: #000;
position: absolute;
border-radius: 20px;
bottom: 0;
}
.xhr_foot_l::after {
right: 1px;
}
.xhr_foot_r::after {
left: 1px;
}
/*小黄人眼睛制作*/
.xhr_eyes {
width: 200px;
height: 100px;
position: absolute;
top: 60px;
left: 25px;
}
.xhr_eyes_l,.xhr_eyes_r {
width: 90px;
height: 90px;
border: 5px solid #000;
border-radius: 50%;
background-color: #fff;
float: left;
}
.xhr_eyes_l::after,.xhr_eyes_r::after {
content: "";
width: 30px;
height: 20px;
background-color: #000;
position: absolute;
top: 21px;
}
.xhr_eyes_l::after {
left: -24px;
transform: rotate(30deg);
}
.xhr_eyes_r::after {
right: -24px;
transform: rotate(-30deg);
}
.xhr_eyes_l_black,.xhr_eyes_r_black {
width: 50px;
height: 50px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 25px;
}
.xhr_eyes_l_black {
left: 25px;
}
.xhr_eyes_r_black {
right: 25px;
}
.xhr_eyes_l_white,.xhr_eyes_r_white {
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 12px;
}
.xhr_eyes_l_white {
right: 7px;
}
.xhr_eyes_r_white {
left: 7px;
}
/*嘴巴部分*/
.xhr_mouth {
width: 60px;
height: 35px;
border: 5px solid #000;
border-radius: 0 0 0 30px;
background-color: #fff;
position: absolute;
left: 90px;
top: 200px;
transform: rotate(-30deg);
}
.xhr_mouth::after {
content: "";
width: 81px;
height: 40px;
background-color: yellow;
position: absolute;
border-bottom: 5px solid #000;
transform: rotate(30deg);
top: -22px;
left: 1px;
}
/*制作裤子*/
.xhr_trousers {
width: 100%;
height: 140px;
position: absolute;
top: 260px;
}
.xhr_trousers_t {
width: 150px;
height: 46px;
background: blue;
position: absolute;
left: 45px;
border: 5px solid #000;
border-bottom: 5px solid blue;
z-index: 1;
}
.xhr_trousers_b {
width: 250px;
height: 85px;
background: blue;
position: absolute;
top: 50px;
border-top: 5px solid #000;
}
.t_l_belt,.t_r_belt {
width: 100px;
height: 20px;
background-color: blue;
border: 5px solid #000;
position: absolute;
top: -9px;
}
.t_l_belt {
left: -85px;
transform: rotate(30deg);
}
.t_r_belt {
right: -85px;
transform: rotate(-30deg);
}
.t_l_belt::after,.t_r_belt::after {
content: "";
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
position: absolute;
bottom: 50%;
transform: translateY(50%);
}
.t_l_belt::after {
right: 0px;
}
.t_r_belt::after {
left: 0px;
}
/*头发的动画效果*/
.xhr_hair_1,.xhr_hair_2 {
animation: hair 5s ease-in infinite;
}
@keyframes hair {
10% {
transform: rotate(50deg);
}
20% {
transform: rotate(60deg);
}
50% {
transform: rotate(50deg);
}
80% {
transform: rotate(60deg);
}
100% {
transform: rotate(50deg);
}
}
/*眼睛动画效果*/
.xhr_eyes_l_black,.xhr_eyes_r_black {
animation: eyes 5s linear infinite;
}
@keyframes eyes {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-25px);
}
50% {
transform: translateX(0px);
}
75% {
transform: translateX(25px);
}
100% {
transform: translateX(0px);
}
}
</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_eyes_l_black">
<div class="xhr_eyes_l_white"></div>
</div>
</div>
<div class="xhr_eyes_r">
<div class="xhr_eyes_r_black">
<div class="xhr_eyes_r_white"></div>
</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>