drawLittleHuang.css

@charset "utf-8";

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 .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;
}
.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;
}
.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;
}
.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);
	-webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
	0%,25%,31%,100%{
	}
	30%{
		-webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
	}
}
.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);
}
.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;
	-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{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top:7px;
	left:17px;
	-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);
	}
}
.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);
	-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{
	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;
}
@-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{
	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);
	-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{
	left:182px;
	top:220px;
	-webkit-transform:rotate(-40deg);
	-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);
	}
}
.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;
	-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{
	border-bottom-right-radius: 9px;
	border-bottom-left-radius: 6px;
	left:130px;
	-webkit-transform-origin: left top;
	-webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
	0%,50%,100%{
		-webkit-transform: rotate(0deg);
	}

	30%{
		-webkit-transform: rotate(-10deg);
	}
}
.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);
}
.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;
}