css小黄人练习
一开始看了那个css小黄人的文章时感觉很有趣，但是HTML文档很是繁琐，看了很是心烦，所以决定做一个框架
首先是小黄人的HTML框架结构：
1、容器container； 2、小黄人定义littleH；3、小黄人整体身体bodyH;
然后先是1、裤子（包括吊带裤，裤袋，突出的矩形部分，三条线）；
2、头发；
3、眼睛（左/右眼睛-黑眼珠+白眼仁）；
4、嘴巴（嘴巴形状）；
5、双手（左手、右手）；
6、双脚（左脚、右脚）；
7、双脚阴影；
（注：其实全文就是尺寸大小和位置比较繁琐些，具体的写法还是偏简单的，都是绝对定位，z-index的优先级，transform的rotate旋转功能，和after就能够做成一个静止的的小黄人了）
<div class="container"> <!-- 容器 -->
<div class="yellow-child"> <!-- 小黄人 -->
<!-- 身体 -->
<div class="yellow-body">
<!-- 裤子 -->
<div class="trousers">
<div class="condoleBelt"> <!-- 吊带 -->
<div class="left"></div>
<div class="right"></div>
</div>
<!-- 裤子突出部分 -->
<div class="trousers-top"></div>
<div class="pocket"></div> <!-- 裤袋 -->
<!-- 三条线 -->
<span class="line_left"></span>
<span class="line_right"></span>
<span class="line_bottom"></span>
</div>
<!-- 裤子 end -->
</div>
<!-- 身体 end -->
<!-- 头发 -->
<div class="hair">
<span class="left_hair_one"></span>
<span class="left_hair_two"></span>
</div>
<!-- 头发 end -->
<!-- 眼睛 -->
<div class="eyes">
<!-- 左眼 -->
<div class="leftEyes">
<div class="left_blackEye">
<div class="left_white"></div>
</div>
</div>
<!-- 右眼 -->
<div class="rightEyes">
<div class="right_blackEye">
<div class="right_white"></div>
</div>
</div>
</div>
<!-- 眼睛 end -->
<!-- 嘴巴 -->
<div class="mouse">
<div class="mouse_shape"></div>
</div>
<!-- 嘴巴 end -->
<!-- 双手 -->
<div class="hands">
<div class="leftHand"></div>
<div class="rightHand"></div>
</div>
<!-- 双手 end -->
<!-- 双脚 -->
<div class="feet">
<div class="left_foot"></div>
<div class="right_foot"></div>
</div>
<!-- 双脚 end -->
<!-- 脚底阴影 -->
<div class="groundShadow"></div>
<!-- 脚底阴影 end -->
</div>
</div>
css代码就比较冗长些，不过写了前面后面都是类似的写法了：
@charset "utf-8";
body{margin:0;padding:0;}
.container{width: 300px;margin:100px auto;}
.yellow-child{position: relative;}
.yellow-body{
position: absolute;
width: 240px;
height: 400px;
border:5px solid #000;
border-radius: 115px;
background: rgb(249,217,70);
overflow: hidden; /*把身体的多余部分隐藏起来，这样就不用考虑内部结构的是否溢出问题了*/
z-index: 2;
}
.yellow-body .trousers{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
border-top: 6px solid #000;
background: rgb(32,116,160);
}
.trousers-top{
width: 160px;
height: 60px;
border:6px solid #000;
border-bottom: none;
border-radius: 0 0 5px 5px;
background: rgb(32,116,160);
position: absolute;
bottom: 100px;
left: 34px;
}
/*吊带*/
.yellow-body .condoleBelt{
position: absolute;
}
.yellow-body .condoleBelt .right{
width: 100px;
height: 16px;
border:5px solid #000;
background: rgb(32,116,160);
position: absolute;
top:-90px;
left:-35px;
z-index: 2;
-webkit-transform:rotate(45deg);
}
.yellow-body .condoleBelt .left{
width: 100px;
height: 16px;
border:5px solid #000;
background: rgb(32,116,160);
position: absolute;
top: -88px;
left: 165px;
z-index: 2;
-webkit-transform:rotate(-45deg);
}
.yellow-body .condoleBelt .left:after{
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #000;
position: absolute;
top:4px;
left: 5px;
}
.yellow-body .condoleBelt .right:after{
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #000;
position: absolute;
top:4px;
left: 88px;
}
/*裤子突出部分*/
.pocket{
width: 60px;
height: 45px;
border:6px solid #000;
border-radius: 0 0 25px 25px;
position: absolute;
bottom: 65px;
left: 84px;
}
.line_left{
width: 30px;
height: 30px;
border-bottom-right-radius: 100px;
border-bottom: 6px solid #000;
border-right: 6px solid #000;
position: absolute;
left: 0;
bottom: 56px;
}
.line_right{
width: 30px;
height: 30px;
border-bottom-left-radius: 100px;
border-bottom: 6px solid #000;
border-left: 6px solid #000;
position: absolute;
right: 0;
bottom: 56px;
}
.line_bottom{
height: 40px;
border:3px solid #000;
border-radius: 3px;
position: absolute;
bottom: 0;
left: 118px;
}
/*眼睛*/
.eyes{
position: relative;
z-index: 3;
}
.eyes .leftEyes, .eyes .rightEyes{
width: 85px;
height: 85px;
border-radius: 50%;
border:6px solid #000;
background: #fff;
position: absolute;
left: 27px;
top: 60px;
}
.eyes .leftEyes{
left:124px;
}
.eyes .leftEyes .left_blackEye, .eyes .rightEyes .right_blackEye{
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
position: absolute;
left: 22px;
top:24px;
}
.eyes .leftEyes .left_blackEye .left_white,
.eyes .rightEyes .right_blackEye .right_white{
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
top: 7px;
left: 17px;
}
.eyes .leftEyes:after{
content: "";
width: 28px;
height: 18px;
background: #000;
position: absolute;
left: 89px;
top: 37px;
-webkit-transform:skewX(20deg)rotate(7deg);
}
.eyes .rightEyes:after{
content: "";
width: 28px;
height: 18px;
background: #000;
position: absolute;
left: -30px;
top: 37px;
-webkit-transform:skewX(-20deg)rotate(-7deg);
}
/*嘴巴部分*/
.mouse{
position: relative;
z-index: 3;
}
.mouse .mouse_shape{
width: 55px;
height: 35px;
border:5px solid #000;
border-bottom-left-radius: 30px;
background: #fff;
position: absolute;
top: 175px;
left:98px;
-webkit-transform:rotate(-35deg);
}
.mouse .mouse_shape:after{
content: "";
width: 79px;
height: 38px;
border-bottom: 5px solid #000;
border-radius: 0px;
background: rgb(249,217,70);
position: absolute;
top: -22px;
left: 0px;
-webkit-transform:rotate(35deg);
}
/*双手*/
.hands{
position: relative;
}
.hands .leftHand{
width: 80px;
height: 80px;
border:6px solid #000;
border-radius: 25px;
background: rgb(249,217,70);
position: absolute;
top: 220px;
left: -23px;
-webkit-transform:rotate(40deg);
}
.hands .rightHand{
width: 80px;
height: 80px;
border:6px solid #000;
border-radius: 25px;
background: rgb(249,217,70);
position: absolute;
top: 220px;
left:182px;
-webkit-transform:rotate(-40deg);
}
.hands .leftHand:after,
.hands .rightHand:after{
content: "";
width: 6px;
border:3px solid #000;
border-radius: 3px;
position: absolute;
left: 13px;
top:50px;
-webkit-transform:rotate(90deg);
}
.hands .rightHand:after{
left: 53px;
top:50px;
-webkit-transform:rotate(-90deg);
}
/*双脚*/
.feet{
position: relative;
}
.feet .left_foot,
.feet .right_foot{
width: 36px;
height: 50px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 9px;
background: #000;
position: absolute;
top:406px;
left: 88px;
-webkit-transform-orign:right top;
}
.feet .left_foot{
border-bottom-right-radius: 9px;
border-bottom-left-radius:6px;
left: 130px;
-webkit-transform-orign:left top;
}
.feet .left_foot:after,
.feet .right_foot:after{
content: "";
width: 60px;
height: 35px;
border-radius: 20px 10px 21px 15px;
background: #000;
position: absolute;
left: -36px;
top: 14.4px;
-webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
border-radius: 10px 20px 15px 21px;
left: 13px;
-webkit-transform:rotate(-5deg);
}
虽然还有脚底阴影部分和动画没有完成，不过相对来说基本的小黄人已经形成啦
