小黄人
实现思想：
1、用一个容器装小黄人，样式定位为相对定位：<div class="wrap"></div>
2、把整个小黄人的身体做出来，然后添加头发；
3、实现小黄人的手臂；
4、小黄人的腿、脚；
5、小黄人的眼睛、眼镜、眼球部分
6、衣服部分。
我这里主要使用伪元素，CSS3的动画animation，transform；
Animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向
div部分代码
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>
CSS代码：
<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: -205px;
/*margin-left: -130px;*/
transform: translate(-50%, -50%);/*居中方法*/
background: yellow;
border-bottom: 5px solid #000;
overflow: hidden;
}
/*头发*/
.xhr_hair_1,.xhr_hair_2{
width: 140px;
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: 95px;
top: 70px;
transform: rotate(50deg);
}
/*手臂*/
.xhr_hand_l,.xhr_hand_r{
width: 100px;
height: 100px;
border: 5px solid #000;
position: absolute;
z-index: -2;
border-radius: 30px;
background: yellow;
}
.xhr_hand_l{
left: 50px;
top: 50%;
transform: rotate(30deg);
}
.xhr_hand_r{
right: 50px;
top: 50%;
transform: rotate(-30deg);
}
.xhr_hand_l::after,.xhr_hand_r::after{
content: " ";
width: 50px;
height: 13px;
background-color: #000;
position: absolute;
border-radius: 5px;
}
.xhr_hand_l::after{
left: -2px;
top: 55px;
transform: rotate(-100deg);
}
.xhr_hand_r::after{
right: -2px;
top: 55px;
transform: rotate(100deg);
}
/*腿脚*/
.xhr_footer_l,.xhr_footer_r{
width: 40px;
height: 65px;
background-color: #000;
position: absolute;
z-index: -22;
}
.xhr_footer_l{
left: 156px;
/*transform: translate(-20px);*/
bottom: 44px;
}
.xhr_footer_r{
right: 156px;
/*transform: translate(-20px);*/
bottom: 44px;
}
.xhr_footer_l::before,.xhr_footer_r::after{
content: " ";
width: 55px;
height: 40px;
background-color: #000;
position: absolute;
border-radius: 20px;
}
.xhr_footer_l::before{
left: -40px;
top: 25px;
}
.xhr_footer_r::after{
right: -40px;
top: 25px;
}
/*眼镜 */
.xhr_eyes{
/*width: 100%;
height: 100px;*/
/*border: 1px solid red;*/
position: absolute;
top: 60px;
left: 24px;/*身体的宽度-眼镜的宽度，然后让它居中，两边剩下50px，居中*/
}
.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::before,.xhr_eyes_r::after{
content: " ";
width: 30px;
height: 20px;
position: absolute;
background-color: #000;
}
.xhr_eyes_l::before{
left: -26px;
top: 38px;
transform: rotate(15deg);
}
.xhr_eyes_r::after{
right: -26px;
top: 38px;
transform: rotate(-15deg);
}
/*眼睛*/
.xhr_l_black,.xhr_r_black{
width: 55px;
height: 50px;
background-color: #000;
border-radius:50%;
position: absolute;
top: 25px;
/*left: 3px;*/
}
.xhr_eyes_l .xhr_l_black{
left: 8px;
}
.xhr_eyes_r .xhr_r_black{
/*float: right;*/
right: 37px;
}
.xhr_l_white,.xhr_r_white{
width: 22px;
height: 22px;
background-color: #fff;
border-radius:50%;
position: absolute;
top: 40px;
}
.xhr_eyes_l .xhr_l_white{
left: 35px;
}
.xhr_eyes_r .xhr_r_white{
right: 64px;
}
/*嘴巴*/
.xhr_mouth{
width: 60px;
height: 35px;
border: 5px solid #000;
position: absolute;
border-radius: 0 0 0px 30px;
background-color: #fff;
left: 90px;
top: 180px;
transform: rotate(-30deg);
}
.xhr_mouth::after{
content: " ";
width: 81px;
height: 40px;
background-color: yellow;
position: absolute;
border-bottom: 5px solid #000;
left: 0px;
top: -22px;
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: 240px;
height: 94px;
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_hair_1,.xhr_hair_2{
animation: hair 5s ease-in infinite;
}
@keyframes hair {
10%{transform: rotate(43deg); }
20% {transform: rotate(48deg) ; }
50%{transform: rotate(50deg); }
80% {transform: rotate(43deg) ; }
90%{transform: rotate(50deg); }
}
/*眼睛动画*/
.xhr_r_black,.xhr_l_black{
animation: eyse 5s ease-in infinite;
}
@keyframes eyse {
10%,50%,60%,100%{
transform: translate(0);
}
30%,40%{
transform: translate(15px);
}
70%,80%{
transform: translate(5px);
}
}
.xhr_l_white,.xhr_r_white{
animation: whiteEyes 5s ease-in infinite;
}
@keyframes whiteEyes{
10%,50%,60%,100%{
transform: translate(0);
}
30%,40%{
transform: translate(15px,4px);
}
70%,80%{
transform: translate(5px,4px);
}
}
</style>
最后是这样的效果https://codepen.io/iyouu/pen/MdgGZM
注意定位的时候位置的设置，设置动画的时候要想好怎么动，眼睛和眼球动的次数是一样的。还有该demo没兼容ie8，9以下版本。
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
