原创项目分享-HTML5+CSS3-机器猫

    
    
    
 * {
     margin: 0;
     padding: 0;
 }

 .whole {
     width: 800px;
     margin: 20px auto;
     
     background-color: white;
     position: relative;
 }

 .head {
     margin: 0 auto;
     position: relative;
     width: 500px;
     height: 440px;
     background-color: rgb(0, 183, 231);
     border-radius: 220px;
     border: 1px solid red;
 }

 .eye .left_eye,
 .eye .right_eye {
     width: 100px;
     height: 130px;
     background-color: white;
     border: 2px solid black;
     border-radius: 50px;
     position: absolute;
     top: 50px;
     z-index: 3;
 }

 .eye .LeyeBall,
 .eye .ReyeBall {
     width: 20px;
     height: 20px;
     background: black;
     border-radius: 10px;
     position: absolute;
     top: 65px;
 }

 .eye .left_eye {
     left: 146px;
 }

 .eye .right_eye {
     left: 250px;
 }

 .eye .LeyeBall {
     right: 10px;
 }

 .eye .ReyeBall {
     left: 10px;
 }

 .face {
     position: relative;
     z-index: 2;
 }

 .face .feature {
     width: 400px;
     height: 320px;
     border-radius: 160px;
     position: absolute;
     top: 100px;
     left: 50px;
     background: white;
 }

 .face .nose {
     width: 45px;
     height: 50px;
     border-radius: 23px;
     background-color: rgb(207, 51, 24);
     border: 2px solid black;
     position: absolute;
     top: 165px;
     left: 225px;
     z-index: 3;
 }

 .face .Nline {
     width: 3px;
     height: 160px;
     background: black;
     position: absolute;
     top: 218px;
     left: 248px;
     z-index: 3;
 }

 .face .mouth {
     width: 280px;
     height: 280px;
     border-bottom: 5px solid black;
     border-radius: 140px;
     position: absolute;
     top: 98px;
     left: 105px;
 }

 .face .mustache .MutR_higher {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 220px;
     left: 295px;
     z-index: 2;
 }

 .face .mustache .MutR_middle {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 240px;
     left: 295px;
     z-index: 2;
 }

 .face .mustache .MutR_lower {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 260px;
     left: 295px;
     z-index: 2;
 }

 .face .mustache .MutL_top {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 220px;
     left: 115px;
     z-index: 2;
 }

 .face .mustache .MutL_center {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 240px;
     left: 115px;
     z-index: 2;
 }

 .face .mustache .MutL_bottom {
     width: 80px;
     height: 2px;
     background: black;
     position: absolute;
     top: 260px;
     left: 115px;
     z-index: 2;
 }

 .face .mustache .MutL_bottom,
 .face .mustache .MutR_higher {
     transform: rotate(160deg);
 }

 .face .mustache .MutL_top,
 .face .mustache .MutR_lower {
     transform: rotate(200deg);
 }

 .neck {
     width: 300px;
     height: 30px;
     background-color: rgb(163, 31, 18);
     border: 2px solid black;
     border-radius: 15px;
     position: relative;
     top: 0px;
     left: 250px;
     z-index: 4;
 }

 .neck .bell {
     width: 60px;
     height: 60px;
     overflow: hidden;
     border: 2px solid black;
     border-radius: 60px;
     background-color: rgb(207, 203, 60);
     position: absolute;
     top: 5px;
     left: 120px;
 }

 .bell .Bline {
     width: 60px;
     height: 2px;
     background-color: rgb(207, 203, 60);
     border: 2px solid black;
     border-radius: 3px 3px 0 0;
     position: absolute;
     top: 15px;
 }

 .bell .Bcircle {
     width: 20px;
     height: 16px;
     background: black;
     border-radius: 8px;
     position: absolute;
     top: 25px;
     left: 20px;
 }

 .bell .Bunderpart {
     width: 3px;
     height: 20px;
     background-color: black;
     position: absolute;
     left: 28px;
     top: 40px;
 }

 .body {
     position: relative;
     top: -300px;
     z-index: 1;
 }

 .body .tummy {
     width: 280px;
     height: 240px;
     background-color: rgb(0, 177, 225);
     border: 2px solid black;
     position: absolute;
     top: 267px;
     left: 260px;
 }

 .body .bellyband {
     width: 220px;
     height: 220px;
     background-color: white;
     border: 2px solid black;
     border-radius: 110px;
     position: absolute;
     left: 290px;
     top: 267px;
 }

 .body .pocket {
     width: 160px;
     height: 160px;
     border-radius: 80px;
     background-color: white;
     border: 2px solid black;
     position: absolute;
     top: 305px;
     left: 320px;
 }

 .cover {
     width: 164px;
     height: 80px;
     background-color: white;
     border-bottom: 2px solid black;
     
     position: absolute;
     top: 300px;
     left: 320px;
 }

 .left_hand,
 .right_hand {
     height: 100px;
     width: 100px;
     position: absolute;
     top: 272px;
     left: 248px;
 }

 .left_hand {
     left: -10px;
 }

 .left_hand .Larm {
     width: 70px;
     height: 100px;
     background-color: rgb(0, 190, 232);
     border: 1px solid black;
     position: relative;
     top: 200px;
     left: 535px;
     transform: rotateZ(135deg);
     
 }

 .right_hand {
     left: -10px;
 }

 .right_hand .Rarm {
     width: 70px;
     height: 100px;
     background-color: rgb(0, 190, 232);
     border: 1px solid black;
     
     position: relative;
     top: 200px;
     left: 215px;
     transform: rotateZ(45deg);
 }

 .left_hand .Lpalm,
 .right_hand .Rpalm {
     width: 80px;
     height: 80px;
     border-radius: 40px;
     border: 2px solid black;
     background-color: white;
     position: absolute;
 }

 .right_hand .Rpalm {
     left: 580px;
     top: 260px;
     z-index: 1;
 }

 .left_hand .Lpalm {
     left: 160px;
     top: 260px;
     z-index: 1;
 }

 .foot .left_foot,
 .foot .right_foot {
     width: 150px;
     height: 40px;
     background-color: white;
     border: 2px solid black;
     border-radius: 80px 60px 60px 40px;
     position: relative;
 }

 .foot .left_foot {
     left: 240px;
     top: 210px;
 }

 .foot .right_foot {
     top: 165px;
     left: 410px;
 }

 .foot .crotch {
     width: 40px;
     height: 20px;
     background-color: white;
     border: 2px solid black;
     border-bottom: none;
     border-radius: 40px 40px 0 0;
     position: relative;
     top: 103px;
     left: 382px;
     z-index: 2
 }