css小黃人練習

一開始看了那個css小黃人的文章時感受頗有趣，可是HTML文檔非常繁瑣，看了非常心煩，因此決定作一個框架

首先是小黃人的HTML框架結構：

                                                             

          一、容器container； 二、小黃人定義littleH；三、小黃人總體身體bodyH;

   而後先是一、褲子（包括吊帶褲，褲袋，突出的矩形部分，三條線）；

   　　　　二、頭髮；

　　　　　三、眼睛（左/右眼睛-黑眼珠+白眼仁）；

　　　　　四、嘴巴（嘴巴形狀）；

　　　　　五、雙手（左手、右手）；

　　　　　六、雙腳（左腳、右腳）；

　　　　　七、雙腳陰影；

（注：其實全文就是尺寸大小和位置比較繁瑣些，具體的寫法仍是偏簡單的，都是絕對定位，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);
}

 

雖然還有腳底陰影部分和動畫沒有完成，不過相對來講基本的小黃人已經造成啦