用html和css制作小黄人,CSS小黄人

body {

margin:0;

padding:0;

}

/*身体*/

.wrapper {

width:300px;

margin:100px auto;

}

.litteH {

position:relative;

}

.bodyH {

position:absolute;

width:240px;

height:400px;

border:5px solid #000;

border-radius:115px;

background:rgb(249,217,70);

overflow:hidden;

z-index:2;

}

/*裤子*/

.bodyH .condoleBelt {

position:absolute;

}

.bodyH .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;

}

/*吊带*/

.bodyH .condoleBelt .left,.bodyH .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);

}

.bodyH .condoleBelt .left {

top:-88px;

left:165px;

-webkit-transform:rotate(-45deg);

}

.bodyH .condoleBelt .left:after,.bodyH .condoleBelt .right:after {

content:'';

width:8px;

height:8px;

border-radius:50%;

background:#000;

position:absolute;

top:4px;

left:88px;

}

.bodyH .condoleBelt .left:after {

left:5px;

}

/*裤子修饰*/

.pocket {

width:60px;

height:45px;

border:6px solid #000;

border-radius:0px 0px 25px 25px;

position:absolute;

bottom:65px;

left:84px;

}

.line_right {

width:30px;

height:30px;

border-bottom-left-radius:100px;

border-bottom:6px solid #000;

border-left:6px solid #000;

position:absolute;

left:0;

bottom:60px;

-webkit-transform:rotate(-75deg);

}

.line_left {

width:30px;

height:30px;

border-bottom-right-radius:100px;

border-bottom:6px solid #000;

border-right:6px solid #000;

position:absolute;

right:0;

bottom:63px;

-webkit-transform:rotate(75deg);

}

.line_bottom {

height:40px;

border:3px solid #000;

border-radius:3px;

position:absolute;

left:118px;

bottom:0px;

}

/*眼睛*/

.eyes {

position:relative;

z-index:3;

}

.eyes .leftEye,.eyes .rightEye {

width:85px;

height:85px;

border-radius:50%;

border:6px solid #000;

background:#fff;

position:absolute;

top:60px;

left:27px;

}

.eyes .leftEye {

left:124px;

}

.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye {

width:40px;

height:40px;

border-radius:50%;

background:#000;

position:absolute;

top:24px;

left:22px;

}

.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white {

width:20px;

height:20px;

border-radius:50%;

background:#fff;

position:absolute;

top:7px;

left:17px;

}

.eyes .leftEye .left_blackEye .left_white {

top:4px;

left:17px;

}

.eyes .leftEye:after,.eyes .rightEye:after {

content:'';

width:28px;

height:18px;

background:#000;

position:absolute;

left:-30px;

top:37px;

-webkit-transform:skewX(20deg) rotate(7deg);

}

.eyes .leftEye:after {

left:89px;

top:37px;

-webkit-transform:skewX(-20deg) rotate(-7deg);

}

/*嘴巴*/

.mouse {

position:relative;

}

.mouse .mouse_shape {

width:55px;

height:35px;

border:5px solid #000;

border-bottom-left-radius:30px;

background:#fff;

position:absolute;

top:175px;

left:98px;

z-index:3;

-webkit-transform:rotate(-35deg);

}

.mouse .mouse_shape:after {

content:'';

width:70px;

height:32px;

border-bottom:5px solid #000;

border-radius:35px 26px 5px 5px;

background:red;

position:absolute;

top:-16px;

left:3px;

-webkit-transform:rotate(34deg);

}

.mouse .mouse_shape:after {

content:'';

width:70px;

height:32px;

border-bottom:5px solid #000;

border-radius:35px 26px 5px 5px;

background:rgb(249,217,70);

position:absolute;

top:-16px;

left:3px;

-webkit-transform:rotate(34deg);

-webkit-animation:mouse_mask 5s ease-in-out infinite;

}

/*手*/

.hands {

position:relative;

}

.hands .leftHand,.hands .rightHand {

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 .leftHand {

left:182px;

top:220px;

-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 .leftHand: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-origin:right top;

}

.feet .left_foot {

border-bottom-right-radius:9px;

border-bottom-left-radius:6px;

left:130px;

-webkit-transform-origin: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);

}

/*头发*/

.hair {

position:relative;

}

.left_hair_one {

width:130px;

height:100px;

border-radius:50%;

border-top:8px solid #000;

position:absolute;

left:17px;

top:-17px;

-webkit-transform:rotate(27deg);

}

.left_hair_two {

width:80px;

height:80px;

border-radius:50%;

border-top:6px solid #000;

position:absolute;

left:45px;

top:-10px;

-webkit-transform:rotate(15deg);

}

/*脚底阴影*/

.groundShadow {

width:200px;

height:2px;

border-radius:50%;

background:rgba(0,0,0,0.3);

box-shadow:0 0 2px 4px rgba(0,0,0,0.3);

position:relative;

top:455px;

left:25px;

}

/*小黄人各个部位动态*/

.left_hair_one {

-webkit-animation:lefthair 2s ease-in-out infinite;

}

@-webkit-keyframes lefthair {

0%,25%,31%,100% {

}30% {

-webkit-transform:rotate(31deg) translate3d(-3px,-1px,0);

}

}.eyes .leftEye .left_blackEye,.eyes .rightEye .right_blackEye {

-webkit-animation:blackeye 5s ease-in infinite;

}

@-webkit-keyframes blackeye {

0%,20%,50%,70%,100% {

-webkit-transform:translateX(0px);

}

30%,40% {

-webkit-transform:translateX(15px);

}

80%,90% {

-webkit-transform:translateX(-15px);

}

}.eyes .leftEye .left_blackEye .left_white,.eyes .rightEye .right_blackEye .right_white {

-webkit-animation:whiteeye 5s ease-in-out infinite;

}

@-webkit-keyframes whiteeye {

0%,20%,50%,70%,100% {

-webkit-transform:translateX(0px);

}

30%,40% {

-webkit-transform:translate3d(3px,4px,0);

}

80%,90% {

-webkit-transform:translate3d(-15px,4px,0);

}

}.mouse .mouse_shape {

-webkit-animation:mouse 5s ease-in-out infinite;

}

@-webkit-keyframes mouse {

40%,43% {

width:45px;

height:25px;

top:180px;

}

0%,35%,48%,100% {

width:55px;

height:35px;

top:175px;

-webkit-transform:rotate(-35deg);

}

}.mouse .mouse_shape:after {

-webkit-animation:mouse_mask 5s ease-in-out infinite;

}

@-webkit-keyframes mouse_mask {

40%,43% {

width:60.5px;

top:-19.3px;

left:1.5px;

}

0%,35%,48%,100% {

width:70px;

top:-16px;

left:3px;

-webkit-transform:rotate(33deg);

}

}.hands .rightHand {

-webkit-animation:rightHand .8s ease-in-out infinite;

}

@-webkit-keyframes rightHand {

0%,50%,100% {

-webkit-transform:rotate(40deg);

}

30% {

-webkit-transform:rotate(37deg) translateX(1px);

}

}.hands .leftHand {

-webkit-animation:leftHand .8s ease-in-out infinite;

}

@-webkit-keyframes leftHand {

0%,50%,100% {

-webkit-transform:rotate(-40deg);

}

80% {

-webkit-transform:rotate(-37deg) translateX(-1px);

}

}.feet .right_foot {

-webkit-animation:rightfoot .8s ease-in-out infinite;

}

@-webkit-keyframes rightfoot {

0%,50%,100% {

-webkit-transform:rotate(0deg);

}

80% {

-webkit-transform:rotate(10deg);

}

}.feet .left_foot {

-webkit-animation:leftfoot .8s ease-in-out infinite;

}

@-webkit-keyframes leftfoot {

0%,50%,100% {

-webkit-transform:rotate(0deg);

}

30% {

-webkit-transform:rotate(-10deg);

}

}