CSS熊猫绘制教程：使用纯CSS代码制作可爱熊猫

<!DOCTYPE html>
<html>
<head>
	<title>熊猫</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="panda-body">
		<div class="panda-ear"></div>
		<div class="panda-eye"></div>
		<div class="panda-eye"></div>
		<div class="panda-nose"></div>
		<div class="panda-mouth"></div>
		<div class="panda-foot"></div>
		<div class="panda-foot"></div>
		<div class="panda-hand"></div>
		<div class="panda-hand"></div>
	</div>
</body>
</html>
<p>/* 设置熊猫身体的样式 */
.panda-body {
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 50%;
position: relative;
overflow: hidden;
margin: 100px auto;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}</p>
<p>/* 设置熊猫耳朵的样式 */
.panda-ear {
width: 50px;
height: 70px;
background-color: #000;
border-radius: 50% 50% 0 0;
position: absolute;
top: -20px;
left: 50px;
transform: rotate(45deg);
z-index: 1;
}</p>
<p>/* 设置熊猫眼睛的样式 */
.panda-eye {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 60px;
left: 70px;
z-index: 2;
}</p>
<p>/* 设置熊猫眼珠的样式 */
.panda-eye::before {
content: '';
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
}</p>
<p>/* 设置熊猫鼻子的样式 */
.panda-nose {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 85px;
left: 90px;
z-index: 2;
}</p>
<p>/* 设置熊猫嘴巴的样式 */
.panda-mouth {
width: 60px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 95px;
left: 70px;
transform: rotate(10deg);
box-shadow: -5px -5px 5px rgba(0,0,0,0.1);
}</p>
<p>/* 设置熊猫脚的样式 */
.panda-foot {
width: 40px;
height: 60px;
background-color: #000;
border-radius: 0 0 50% 50%;
position: absolute;
bottom: -40px;
left: 80px;
transform: rotate(-10deg);
z-index: 1;
}</p>
<p>/* 设置熊猫手的样式 */
.panda-hand {
width: 60px;
height: 40px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 120px;
left: -20px;
transform: rotate(-45deg);
z-index: 1;
}</p>
<p>/* 设置熊猫手掌的样式 */
.panda-hand::before {
content: '';
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 10px;
left: 20px;
}</p>