制作小黄人
实现效果,其中,头发和眼睛有动画效果
制作过程
- 制作容器
<!-- 容器 -->
<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="xhr_foot">
<div class="xhr_foot_l"></div>
<div class="xhr_foot_r"></div>
</div>
</div>
- 为小黄人制作样式
/* 设定小黄人容器 */
.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%;
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(48deg); /* 旋转40°*/
}
.xhr_hair_2 {
left: 102px;
top: 70px;
transform: rotate(48deg);
}
/* 设定小黄人手臂 */
.xhr_hand_l, .xhr_hand_r{
width: 100px;
height: 100px;
border: 5px solid #000;
position: absolute;
border-radius: 30px;
background: yellow;
z-index: -1;
}
.xhr_hand_l{
left: 48px;
top: 300px;
transform: rotate(30deg);
}
.xhr_hand_r{
right: 48px;
top: 300px;
transform: rotate(-30deg);
}
.xhr_hand_l::after, .xhr_hand_r::after{
content: "";
width: 30px;
height: 15px;
background: #000;
position: absolute;
border-radius: 5px;
}
.xhr_hand_l::after{
left: 10px;
top: 60px;
transform: rotate(-90deg);
}
.xhr_hand_r::after{
right: 10px;
top: 60px;
transform: rotate(90deg);
}
/* 制作小黄人的腿 */
.xhr_foot_l, .xhr_foot_r{
width: 40px;
height: 90px;
background: #000;
position: absolute;
z-index: -1;
}
.xhr_foot_l{
left: 155px;
bottom: 48px;
}
.xhr_foot_r{
right: 155px;
bottom: 48px;
}
.xhr_foot_l::after, .xhr_foot_r::after{
content: "";
width: 60px;
height: 40px;
background: #000;
border-radius: 20px;
position: absolute;
}
.xhr_foot_l::after{
left: -40px;
top: 50px;
}
.xhr_foot_r::after{
right: -40px;
top: 50px;
}
/* 制作小黄人的眼睛 */
.xhr_eyes{
position: absolute;
top: 60px;
left: 25px;
}
.xhr_eyes_l, .xhr_eyes_r{
width: 90px;
height: 90px;
border: 5px solid #000;
border-radius: 100%;
background: #fff;
float: left;
}
.xhr_eyes_l::after, .xhr_eyes_r::after{
content: "";
width: 31px;
height: 20px;
position: absolute;
background: #000000;
}
.xhr_eyes_l::after{
left: -26px;
top: 35px;
transform: rotate(20deg);
border-radius: 2px 8px 0 2px;
}
.xhr_eyes_r::after{
right: -26px;
top: 35px;
transform: rotate(-20deg);
border-radius: 8px 2px 0 2px;
}
/* 制作眼珠 */
.xhr_l_black, .xhr_r_black{
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
position: absolute;
}
.xhr_l_black{
left: 25px;
top: 25px;
}
.xhr_r_black{
right: 25px;
top: 25px;
}
.xhr_l_white, .xhr_r_white{
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
}
.xhr_l_white {
top: 40px;
left: 50px;
}
.xhr_r_white {
top: 40px;
right: 50px;
}
/* 制作嘴巴 */
.xhr_mouth{
width: 60px;
height: 35px;
background: #fff;
border: 5px solid #000;
border-radius: 0 0 0 30px;
position: absolute;
top: 180px;
left: 90px;
transform: rotate(-30deg);
}
.xhr_mouth::after{
content: "";
width: 80px;
height: 40px;
background: yellow;
border-bottom: 5px solid #000;
position: absolute;
left: 1px;
top: -22px;
transform: rotate(30deg);
}
/* 制作裤子 */
.xhr_trousers{
width: 100%;
height: 140px;
position: absolute;
top: 260px;
}
.xhr_trousers_t{
width: 150px;
height: 50px;
background: blue;
border: 5px solid #000;
border-bottom: none;
position: absolute;
left: 45px;
z-index: 99;
}
.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: blue;
border: 5px solid #000;
position: absolute;
}
.t_l_belt{
top: -24px;
left: -75px;
transform: rotate(35deg);
}
.t_r_belt{
top: -24px;
right: -75px;
transform: rotate(-35deg);
}
.t_l_belt::after, .t_r_belt::after{
content: "";
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
position: absolute;
top: 5px;
}
.t_l_belt::after{
right: 5px;
}
.t_r_belt::after{
left: 5px;
}
/* 头发的动画效果 */
.xhr_hair_1,.xhr_hair_2{
animation: hair 5s ease-in infinite;
}
@keyframes hair{
10%,50%,100%{
transform: rotate(48deg);
}
20%,80%{
transform: rotate(60deg);
}
}
/* 眼睛的动画 */
.xhr_l_black,.xhr_r_black{
animation: blackEyes 5s ease-in infinite;
}
@keyframes blackEyes{
10%,50%,100%{
transform: translate(0);
}
30%{
transform: translate(20px);
}
80%{
transform: translate(-20px);
}
}
.xhr_l_white,.xhr_r_white{
animation: whiteEyes 5s ease-in infinite;
}
@keyframes whiteEyes{
10%,50%,100%{
transform: translate(0);
}
30%{
transform: translate(20px,1px);
}
80%{
transform: translate(-20px,1px);
}
}