用 CSS 绘制小黄人

博主： admin
发布时间：2024 年 10 月 07 日
53 次浏览
5458字数
分类：代码笔记

**通过样式代码，能绘制出小黄人卡通图形。**

```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小黄人</title>
	<link rel="stylesheet" href="css/xhr.css">
</head>
<body>
	<div class="wrap">
		
		<div class="xhr_hair">
			<div class="xhr_hair1"></div>
			<div class="xhr_hair2"></div>
		</div>
		
		<div class="xhr_body">
			
			<div class="xhr_eyes">
				<div class="xhr_eyesl">
					<div class="xhr_eyesl_black"></div>
					<div class="xhr_eyesl_witer"></div>
				</div>
				<div class="xhr_eyesr">
					<div class="xhr_eyesr_black"></div>
					<div class="xhr_eyesr_witer"></div>
				</div>
			</div>
			
			<div class="xhr_mouth"></div>
			
			<div class="xhr_trousers">
				
				<div class="xhr_trousers_t">
					
					<div class="t_l_belt"></div>
					<div class="t_r_belt"></div>
				</div>
				
				<div class="xhr_trousers_b"></div>
			</div>
		</div>
		
		<div class="xhr_hand">
			<div class="xhr_hand_l"></div>
			<div class="xhr_hand_r"></div>
		</div>
		
		<div class="xhr_foot">
			<div class="xhr_foot_l"></div>
			<div class="xhr_foot_r"></div>
		</div>
	</div>
</body>
</html>Copy
```

```
.wrap {
	width: 400px;
	height: 600px;
	margin: 0 auto;
	border: 1px solid red;
	position: relative;
}
/*设定小黄人高度*/
.xhr_body {
	height: 400px;
	width: 250px;
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);    /*上下居中*/
	left: 50%;
	background-color: yellow;
	border: 5px solid #000;
	border-radius: 125px;
	overflow: hidden;   /*身体定义了溢出隐藏*/
}
/*定位头发   两根头发都在一个hair的盒子里 可以先把两根头发叠在一起造
型，然后利用hair盒子定位后使用top定位*/
.xhr_hair1,.xhr_hair2 {
	height: 100px;
	width: 130px;
	/*border-left: 10px solid #000;*/
	border-top: 10px solid #000;
	border-radius: 50%;
	position: absolute;
	animation: hair 5s ease-in infinite;  /* 头发动画*/
}
@keyframes hair {
	10%,50%,100% {
		transform: rotate(40deg);
	}
	20% {
		transform: rotate(45deg);
	}
	80% {
		transform: rotate(45deg);
	}
}
.xhr_hair {
	position: absolute;
	top: 7px;
}
.xhr_hair1 {
	left: 98px;
    top: 60px;
    transform: rotate(40deg);

}
.xhr_hair2 {
	left: 100px;
    top: 73px;
    transform: rotate(40deg);

}

/*手臂*/
.xhr_hand_l,.xhr_hand_r {
	height: 100px;
	width: 100px;
	border: 5px solid #000;
	position: absolute;
	border-radius: 30px;
	z-index: -1;
	background: yellow;

}
.xhr_hand_l {
	left: 50px;
	top: 300px;
	transform: rotate(120deg);

}
.xhr_hand_r {
	top: 300px;
	right: 50px;
	transform: rotate(-120deg);
}
.xhr_hand_l::after,.xhr_hand_r::after {
	content: "";
	position: absolute;
	height: 10px;
	width: 50px;
	background: #000;
	border-radius: 5px;
}
.xhr_hand_l::after {
	left: 30px;
    top: 73px;	
}
.xhr_hand_r::after {
	/*left: 20px;*/
	right: 30px;
    top: 73px;	
}

/*腿部*/
.xhr_foot_l,.xhr_foot_r {
	height: 60px;
	width: 40px;
	background: #000;
	position: absolute;
	z-index: -1;
}
.xhr_foot_l {
	left: 150px;
	bottom: 50px;
}
.xhr_foot_r {
	right: 150px;
	bottom: 50px;
}
.xhr_foot_l::after,.xhr_foot_r::after {
	content: "";
	height: 40px;
	width: 60px;
	background: #000;
	border-radius: 20px;
	position: absolute;
	top: 20px;
}
.xhr_foot_l::after {
	left: -35px;
}
.xhr_foot_r::after {
	right: -35px;
}

/*眼睛*/
.xhr_eyes {
	/*border: 1px solid red;*/
	position: absolute;
	top: 60px;
	left: 25px;  /*不给父元素定宽高，直接用定位计算出左边距，然后利用子元素撑开高*/
}
.xhr_eyesl,.xhr_eyesr {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: 5px solid #000;
	float: left;
	background: #fff;
}
.xhr_eyesl::after,.xhr_eyesr::after {
	content: "";
	width: 30px;
	height: 20px;
	background: #000;
	position: absolute;
	top: 28px;
}
.xhr_eyesl::after {
	left: -25px;
	/*top: 28px;*/
	transform: rotate(20deg);
}
.xhr_eyesr::after {
	right: -25px;	
	transform: rotate(-20deg);
}
/*眼睛内部*/
.xhr_eyesl_black,.xhr_eyesr_black {
	height: 50px;
	width: 50px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 25px;
	animation: blackeyes 5s ease-in infinite; /* 黑眼珠动画*/
}
@keyframes blackeyes {
	10%,50%,100% {
		transform: translate(0);
	}
	20% {
		transform: translate(16px);
	}
	80% {
		transform: translate(-16px);
	}
}
.xhr_eyesl_black {
	left: 25px;
}
.xhr_eyesr_black {
	right: 25px;
}
.xhr_eyesl_witer,.xhr_eyesr_witer {
	height: 20px;
	width: 20px;
	position: absolute;
	background: #fff;
	border-radius: 50%;
	top: 40px;
	animation: witer 5s ease-in infinite;
}
@keyframes witer {
	10%,50%,100% {
		transform: translate(0);
	}
	20% {
		transform: translate(16px,5px);  /* x,y轴同时运动*/
	}
	80% {
		transform: translate(-16px,5px);
	}
}
.xhr_eyesl_witer {
	left: 50px;
}
.xhr_eyesr_witer {
	right: 50px;
}

/*嘴巴 使用两个盒子叠加*/
.xhr_mouth {
	height: 35px;
	width: 60px;
	background-color: #FFF;
	border-radius: 0 0 0 30px;
	position: absolute;
	top: 200px;
	left: 90px;
	border: 5px solid #000;
	transform: rotate(-30deg);
}
.xhr_mouth::after {
	content: "";
	height: 39px;
	width: 82px;
	left: 1px; 
	background: yellow;
	position: absolute;
	transform: rotate(30deg);
	border-bottom: 5px solid #000;
	top: -21px;
}

/*裤子*/
.xhr_trousers {
	position: absolute;
	top: 260px;
	/*border: 1px solid red;*/
	height: 140px;
	width: 100%;

}
.xhr_trousers_t {
	height: 50px;
	width: 150px;
	background: blue;
	border: 5px solid #000;
	position: absolute;
	/*left: 45px; */
	left: 50%;
	transform: translate(-50%);
	border-bottom: none;
	z-index: 999;
}
.xhr_trousers_b {
	width: 100%;
	height: 85px;
	background: blue;
	border-top: 5px solid #000;
	position: absolute;
	top: 50px;
}

/*裤子的肩带*/
.t_l_belt,.t_r_belt {
	height: 20px;
	width: 100px;
	background: blue;
	border: 5px solid #000;
	position: absolute;
	top: -24px;
}
.t_l_belt {
	transform: rotate(35deg);
	left: -74px;	      
}
.t_r_belt {
	transform: rotate(-35deg);
	right: -74px;
}
.t_l_belt::after,.t_r_belt::after {
	content: "";
	height: 10px;
	width: 10px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 5px;
}
.t_l_belt::after {
	right: 5px;
}
.t_r_belt::after {
	left: 5px;
}Copy
```

侵删转自：[https://blog.csdn.net/qq\_37607451/](https://blog.csdn.net/qq_37607451/article/details/102692999)

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏

用 CSS 绘制小黄人

admin • 2024 年 10 月 07 日

**通过样式代码，能绘制出小黄人卡通图形。**

}
.xhr_hair2 {
	left: 100px;
    top: 73px;
    transform: rotate(40deg);

}

/*手臂*/
.xhr_hand_l,.xhr_hand_r {
	height: 100px;
	width: 100px;
	border: 5px solid #000;
	position: absolute;
	border-radius: 30px;
	z-index: -1;
	background: yellow;

}
.xhr_hand_l {
	left: 50px;
	top: 300px;
	transform: rotate(120deg);

/*裤子*/
.xhr_trousers {
	position: absolute;
	top: 260px;
	/*border: 1px solid red;*/
	height: 140px;
	width: 100%;

侵删转自：[https://blog.csdn.net/qq\_37607451/](https://blog.csdn.net/qq_37607451/article/details/102692999)

用 CSS 绘制 小黄人

用 CSS 绘制小黄人