CSS3 小黄人案例

使用 CSS3 和 HTML5 制作一个小黄人。

结构代码：

 　　<div class="wrap">
         <!-- 头发 -->
         <div class="hair">
             <div class="hair_1"></div>
             <div class="hair_2"></div>
         </div>
         <!-- 身体 -->
         <div class="body">
             <!-- 眼睛 -->
             <div class="eyes">
                 <!-- 左眼 -->
                 <div class="eyes_l">
                     <div class="l_black"></div>
                     <div class="l_white"></div>
                 </div>
                 <!-- 右眼 -->
                 <div class="eyes_r">
                     <div class="r_black"></div>
                     <div class="r_white"></div>
                 </div>
             </div>
             <!-- 嘴巴 -->
             <div class="mouth"></div>
             <!-- 裤子 -->
             <div class="trousers">
                 <!-- 裤子上 -->
                 <div class="trousers_t">
                     <div class="t_l_belt"></div>
                     <div class="t_r_belt"></div>
                 </div>
                 <!-- 裤子下 -->
                 <div class="trousers_b"></div>
             </div>
         </div>

         <!-- 手臂 -->
         <div class="hand">
             <div class="hand_l"></div>
             <div class="hand_r"></div>
         </div>

         <!-- 腿脚 -->
         <div class="foot">
             <div class="foot_l"></div>
             <div class="foot_r"></div>
         </div>

     </div>

　　CSS 样式：

 　　　　.wrap {
             width: 400px;
             height: 600px;
             margin: 0 auto;
             border: 1px solid red;
             position: relative;
         }

         /*身体*/
         .body {
             width: 250px;
             height: 400px;
             border: 5px solid #000;
             border-radius: 125px;
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
             background-color: yellow;
             overflow: hidden;

         }
         /*头发*/
         .hair_1,
         .hair_2 {
             width: 130px;
             height: 100px;
             border-top: 10px solid #000;
             border-radius:50%;
             position: absolute;
         }
         .hair_1 {
             left: 100px;
             top: 80px;
             transform: rotate(45deg);
         }
         .hair_2 {
             left: 102px;
             top: 70px;
             transform: rotate(50deg);
         }

         /*手臂*/
         .hand_l,
         .hand_r {
             width: 100px;
             height: 100px;
             border: 5px solid #000;
             position: absolute;
             border-radius: 30px;
             background-color: yellow;
             z-index: -1
         }
         .hand_l {
             left:50px;
             top:300px;
             transform: rotate(30deg);
         }
         .hand_r {
             right:50px;
             top:300px;
             transform: rotate(-30deg);
         }
         .hand_l::after,
         .hand_r::after {
             content: "";
             width: 30px;
             height: 10px;
             position: absolute;
             background: #000;
             border-radius:5px;

         }
         .hand_l::after {
             left: 6px;
             top: 60px;
             transform: rotate(-90deg);
         }
         .hand_r::after {
             right: 6px;
             top:60px;
             transform: rotate(-90deg);
         }

         /*腿*/

         .foot_l,
         .foot_r {
             width: 40px;
             height: 70px;
             background-color: #000;
             position: absolute;
             top:490px;
             z-index: -1;
         }

         .foot_l {
             left:155px;

         }

         .foot_r {
             right:155px;

         }

         /*脚*/
         .foot_l::after,
         .foot_r::after {
             content: "";
             width: 60px;
             height: 40px;
             background-color: #000;
             border-radius: 20px;
             position: absolute;
             top: 30px;
         }

         .foot_l::after {
             left: -40px;
         }
         .foot_r::after {
             right: -40px;
         }

         /*眼睛*/
         .eyes{
             /*width: 100%;
             height: 100px;*/
             /*border: 1px solid red;*/
             position: absolute;
             top: 60px;
             left: 25px;
         }
         .eyes_l,
         .eyes_r {
             width: 90px;
             height: 90px;
             border: 5px solid #000;
             border-radius: 50%;
             background-color: #fff;
             float: left;

         }
         .eyes_l::after,
         .eyes_r::after {
             content: "";
             width: 31px;
             height: 20px;
             position: absolute;
             background-color: #000;
             top: 35px;

         }

         .eyes_l::after {
             left: -26px;
             transform: rotate(20deg);
             border-radius: 2px 7px 0px 2px;
         }
         .eyes_r::after {
             right: -26px;
             transform: rotate(-20deg);
             border-radius: 8px 2px 0px 2px;
         }

         /*黑色眼珠*/
         .l_black,
         .r_black {
             width: 50px;
             height: 50px;
             background-color: #000;
             border-radius: 50%;
             position: absolute;
             top: 23px;

         }
         .l_black {
             left: 25px;
         }
         .r_black {
             left: 125px;
         }
         /*白眼珠*/

         .l_white,
         .r_white {
             width: 20px;
             height: 20px;
             background-color: #fff;
             border-radius: 50%;
             position: absolute;
             top: 40px;
         }
         .l_white {
             left: 50px;
         }
         .r_white {
             left: 130px;
         }

         /*嘴巴*/
         .mouth {
             width: 60px;
             height: 35px;
             border: 5px solid #000;
             border-radius: 0 0 0 30px;
             position: absolute;
             background-color: #fff;
             left: 90px;
             top: 180px;
             transform: rotate(-30deg);
         }
         .mouth::after {
             content: "";
             width: 80px;
             height: 40px;
             background-color: yellow;
             position: absolute;
             border-bottom: 5px solid #000;
             left: 1px;
             top: -22px;
             transform: rotate(30deg);
         }

         /*裤子上*/
         .trousers {
             width: 100%;
             height: 150px;

             position:absolute;
             top: 260px;

         }
         .trousers_t {
             width: 150px;
             height: 51px;
             background-color: blue;
             border: 5px solid #000;
             border-bottom: none;
             position: absolute;
             left: 45px;
             z-index:;

         }
         .trousers_b {
             width: 250px;
             height: 86px;
             background-color: blue;
             position: absolute;
             top: 50px;
             border-top: 5px solid #000;
             /*border-radius: 0 0 125px 125px;*/
         }

         /*肩带*/
         .t_l_belt,
         .t_r_belt {
             width: 100px;
             height: 20px;
             background-color: blue;
             border: 5px solid #000;
             position: absolute;
             top: -24px;

         }
         .t_l_belt {
             left:-74px;
             transform: rotate(35deg);
         }
         .t_r_belt {
             right: -74px;
             transform: rotate(-35deg);
         }

         .t_l_belt::after,
         .t_r_belt::after {
             content: "";
             position: absolute;
             width: 10px;
             height: 10px;
             background-color: #000;
             border-radius: 50%;
             top: 5px;
         }
         .t_l_belt::after{
             left: 87px;
         }
         .t_r_belt::after {
             left: 3px;
         }

         /*动画*/
         .hair_1,
         .hair_2 {
             animation: hair 5s ease-in infinite;
         }

         @keyframes hair {
             10% {
                 transform: rotate(45deg);
             }
             20% {
                 transform: rotate(56deg);
             }
             50% {
                 transform: rotate(45deg);
             }
             80% {
                 transform: rotate(56deg);
             }
             100% {
                 transform: rotate(45deg);
             }
         }

         .l_black,
         .r_black {
             animation: eye 5s linear infinite;
         }

         @keyframes eye {
             10% {
                 transform: translate(0);
             }
             20% {
                 transform: translate(20px);
             }
             50% {
                 transform: translate(0);
             }
             80% {
                 transform: translate(-20px);
             }
             100% {
                 transform: translate(0);
             }
         }

         .l_white,
         .r_white {
             animation: eyewhite 5s linear infinite;
         }

         @keyframes eyewhite {
             10% {
                 transform: translate(0,0);
             }
             20% {
                 transform: translate(20px,5px);
             }
             50% {
                 transform: translate(0,0);
             }
             80% {
                 transform: translate(-20px,5px);
             }
             100% {
                 transform: translate(0,0);
             }
         }

　　效果图：