/*容器设定*/
.wrap{
	width: 400px;
	height: 600px;
	margin: 0 auto;

	position: relative;
	
}
/*身体设定*/
.xhr_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;
}
/*设定头发*/
.xhr_hair_1,.xhr_hair_2{
	width: 130px;
	height: 100px;
	border-top: 10px solid #000;
	border-radius: 50%;
	position: absolute;
}
.xhr_hair_1{
	left: 100px;
	top: 80px;
	transform: rotate(48deg);
}
.xhr_hair_2{
	left: 100px;
	top: 70px;
	transform: rotate(48deg);
}
/*设定手臂*/
.xhr_hand_1,.xhr_hand_2{
	width: 100px;
	height: 100px;
	border: 5px solid #000;
	position: absolute;
	border-radius: 30PX;
	background-color: yellow;
	z-index:-1;			/*层级设置*/
}
.xhr_hand_1{
	left: 50px;
	top: 300px;
	transform: rotate(30deg);

}
.xhr_hand_2{
	right: 50px;
	top: 300px;
	transform: rotate(-30deg);
}
.xhr_hand_1::after,.xhr_hand_2::after{
	content: "";
	width: 30px;
	height: 10px;
	position: absolute;
	background-color: #000; 
	border-radius: 5px;
}
.xhr_hand_1::after{
	left:6px;
	top: 60px;
	transform: rotate(-90deg);

}
.xhr_hand_2::after{
	right: 6px;
	top: 60px;
	transform: rotate(-90deg);
}
/*腿部制作*/
.xhr_foot_1,.xhr_foot_2{
	width: 40px;
	height: 70px;
	background-color: #000;
	position: absolute;
	z-index: -1;
}
.xhr_foot_1{
	left: 155px;
	top:490px;
}
.xhr_foot_2{
	right: 155px;
	top: 490px;
}
/*脚制作*/
.xhr_foot_1::after,.xhr_foot_2::after{
	content: "";
	width: 60px;
	height: 40px;
	background-color: #000;
	border-radius: 20px;
	position: absolute;
}
.xhr_foot_1::after{
	left: -40px;
	top: 30px;
}
.xhr_foot_2::after{
	right: -40px;
	top: 30px;
}
/*}制作眼睛*/
.xhr_eyes{
	
	position: absolute;
	top: 60px;
	left: 24px;
}
.xhr_eyes_lift,.xhr_eyes_right{
	width: 90px;
	height: 90px;
	border: 5px solid #000;
	border-radius: 50%;
	background:#fff;
	float: left;
}
.xhr_eyes_lift::after,.xhr_eyes_right::after{
	content: "";
	width: 30px;
	height: 20px;
	position: absolute;
	background:#000;
}
.xhr_eyes_lift::after{
	left: -26px;
	top: 35px;
	transform: rotate(20deg);
	border-radius: 2px 7px 0px 2px;
}
.xhr_eyes_right::after{
	right: -26px;
	top: 35px;
	transform: rotate(-20deg);
	border-radius:-2px 7px 5px 2px;
}
/*制作眼珠*/
.xhr_lift_black,.xhr_right_black{
	width: 50px;
	height: 50px;
	background:#000;
	border-radius: 50%;
	position: absolute;
}
.xhr_lift_black{
	left: 25px;
	top: 25px;
}
.xhr_right_black{
	left: 125px;
	top: 25px;
}
/*制作白眼珠*/
.xhr_lift_white,.xhr_right_white{
	width: 20px;
	height:20px;
	background:#fff;
	border-radius: 50%;
	position: absolute;
}
.xhr_lift_white{
	left: 50px;
	top: 40px;
}
.xhr_right_white{
	left: 130px;
	top: 40px;
}
/*制作嘴巴*/
.xhr_mouth{
	width: 60px;
	height: 35px;
	border: 5px solid #000;
	border-radius: 0 0 0 30px;
	position: absolute;
	top: 180px;
	left: 90px;
	transform: rotate(-30deg);
	background: #fff;
}
.xhr_mouth::after{
	content: "";
	width: 80px;
	height: 40px;
	background: yellow;
	position: absolute;
	border-bottom: 5px solid #000;
	left: 1px;
	top: -22px;
	transform: rotate(30deg);
}
.xhr_trousers{
	width: 100%;
	height: 150px;
	top: 260px;
	position: absolute;
}
.xhr_trousers_t{
	width: 150px;
	height: 50px;
	background: blue;
	border: 5px solid #000;
	left: 45px;
	position: absolute;
	border-bottom: none;
	z-index: 25;
}
.xhr_trousers_b{
	width: 250px;
	height: 85px;
	background: blue;
	position: absolute;
	top: 50px;
	border-top: 5px solid #000;
	
}
.t_l_belt,.t_r_belt{
	width: 100px;
	height: 20px;
	background: 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: "";
	width: 10px;
	height: 10px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 5px;

}
.t_l_belt::after{
	left: 85px;
}
.t_r_belt::after{
	left: 3px;
}
/*头发动态效果*/
.xhr_hair_1,.xhr_hair_2{
	animation: hair 5s ease-in infinite;
}
@keyframes hair{
	10%{
		transform: rotate(48deg);
	}
	20%{
		transform: rotate(60deg); 
	}
	50%{
		transform: rotate(48deg);
	}
	80%{
		transform: rotate(60deg);
	}
	100%{
		transform: rotate(48deg);
	}
}
/*眼睛动态效果*/
.xhr_lift_black,.xhr_right_black{
	animation: blackeEyes 5s ease-in infinite;
}
@keyframes blackeEyes{
	10%{
		transform: translate(0);
	}
	20%{
		transform: translate(20px);
	}
	50%{
		transform: translate(0);
	}
	80%{
		transform: translate(-20px);
	}
	100%{
		transform: translate(0);
	}
}
.xhr_lift_white,.xhr_right_white{
	animation: whiteEyes 5s ease-in infinite;
}
@keyframes  whiteEyes{
	10%{
		transform: translate(0,0);
	}
	20%{
		transform: translate(20px,4px);
	}
	50%{
		transform: translate(0,0);
	}
	80%{
		transform: translate(-20px,4px);
	}
	100%{
		transform: translate(0,0);
	}
}