纯css绘制卡通人物形象-html代码-BFW代码库

代码语言：html

代码描述：纯css绘制卡通人物形象

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
	background: rgb(133, 190, 234);
	width: 100vw;
	height: 100vh;
}

.container {
	position: absolute;
	top: 20%;
	left: 25%;
	width: 500px;
	height: 700px;
}

.head {
	position: absolute;
	height: 45%;
	width: 100%;
}

.hat {
	position: absolute;
	height: 50%;
	width: 80%;
	background: rgb(69, 167, 91);
	background: linear-gradient(
		190deg,
		rgba(69, 167, 91, 1) 31%,
		rgba(18, 109, 39, 1) 70%,
		rgba(7, 77, 0, 1) 88%
	);
	border-radius: 70% 80% 5% 70%;
	top: -17%;
	left: 17%;
	transform: rotate(-45deg);
	z-index: -10;
}

#shade {
	position: absolute;
	height: 90%;
	width: 70%;
	right: 15%;
	top: 13%;
	border-radius: 0% 0% 40% 50%;
	z-index: 3;
	background: rgb(241, 135, 99, 0.3);
	background: linear-gradient(
		120deg,
		rgba(241, 135, 99, 0) 55%,
		rgba(241, 135, 99, 1) 76%
	);
}

.face {
	position: absolute;
	height: 100%;
	width: 70%;
	left: 10%;
	top: 5%;
	border-radius: 0% 0% 40% 50%;
	background: rgb(241, 135, 99);
	background: linear-gradient(
		155deg,
		rgba(241, 135, 99, 1) 18%,
		rgba(255, 242, 178, 1) 35%,
		rgba(250, 205, 151, 1) 61%,
		rgba(241, 135, 99, 1) 86%
	);
	z-index: 2;
	box-shadow: 40px -8px rgb(241, 135, 99);
}

.face::before {
	content: "";
	position: absolute;
	background: rgb(241, 135, 99, 0.3);
	background: linear-gradient(
		-30deg,
		rgba(241, 135, 99, 0) 20%,
		rgba(241, 135, 99, 0.7) 90%
	);
	transform: rotate(0deg);
	width: 7%;
	height: 7%;
	left: 33%;
	top: 65%;
	border-radius: 10% 30% 50% 50%;
}

.eyes {
	position: absolute;
	height: 25%;
	width: 12%;
	left: 15%;
	top: 35%;
	border-radius: 50%;
	background: rgb(255, 255, 255);
	background: linear-gradient(
		130deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(0, 0, 0, 1) 39%
	);
	z-index: 6;
	border: solid 2px black;
}

.eyes::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	left: 280%;
	top: -7%;
	border-radius: 45%;
	background: rgb(255, 255, 255);
	background: linear-gradient(
		130deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(0, 0, 0, 1) 39%
	);
	border: solid 2px black;
}

.eyebrows {
	position: absolute;
	height: 8%;
	width: 26%;
	left: 2%;
	top: 22%;
	border-radius: 10% 89% 0% 92% / 12% 91% 0% 64%;
	background: #6f3517;
}

.eyebrows::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 175%;
	top: -35%;
	border-radius: 89% 10% 92% 0% / 91% 12% 64% 0%;
	background: #6f3517;
	transform: rotate(-10deg);
}

.eyebrows::after {
	content: "";
	width: 90%;
	height: 100%;
	position: absolute;
	left: 100%;
	top: 700%;
	border-radius: 50%;
	border-top: solid 5px #6f3517;
}

.left-ear {
	position: absolute;
	height: 25%;
	width: 20%;
	background: rgba(255, 242, 178, 1);
	border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
	left: -5%;
	top: 42%;
	transform: rotate(-8deg);
}

.left-ear::before {
	position: absolute;
	content: "";
	width: 85%;
	height: 40%;
	border-radius: 5% 91% 10% 88% / 10% 82% 10% 94%;
	transform: rotate(16deg);
	background: rgb(241, 135, 99, 0.7);
	background: linear-gradient(
		36deg,
		rgba(241, 135, 99, 0) 25%,
		rgba(241, 135, 99, 1) 76%
	);
	left: 10%;
	bottom: 25%;
}

.right-ear {
	position: absolute;
	height: 35%;
	width: 50%;
	right: -30%;
	top: 20%;
	border-radius: 86% 4% 92% 8% / 47% 7% 93% 0%;
	background: rgb(241, 135, 99);
	background: linear-gradient(
		100deg,
		rgba(241, 135, 99, 1) 23%,
		rgba(255, 242, 178, 1) 72%
	);
	transform: rotate(-8deg);
}

.right-ear::before {
	position: absolute;
	content: "";
	width: 85%;
	height: 40%;
	border-radius: 86% 4% 92% 8% / 47% 7% 93% 0%;
	transform: rotate(-15deg);
	background: rgb(241, 135, 99, 1);
	background: linear-gradient(
		-20deg,
		rgba(241, 135, 99, 0.1) 20%,
		rgba(241, 135, 99, 1) 80%
	);
	left: 10%;
	bottom: 25%;
}

.hair {
	position: absolute;
	width: 470px;
	height: 200px;
	border-radius: 79% 16% 92% 5% / 89% 27% 72% 11%;
	background: rgb(255, 227, 35);
	background: linear-gradient(
		159deg,
		rgba(255, 227, 35, 1) 43%,
		rgba(242, 127, 60, 1) 78%
	);
	z-index: 10;
	left: -18%;
	top: -30%;
	transform: rotate(-8deg);
	/* 	box-shadow: 25px 15px 25px rgb(241,135,99); */
}

.hair-right {
	content: "";
	position: absolute;
	width: 25%;
	height: 79%;
	border-radius: 34% 78% 50% 63% / 41% 62% 72% 59%;
	background: rgb(255, 227, 35);
	background: linear-gradient(
		-100deg,
		rgba(255, 227, 35, 1) 43%,
		rgba(242, 127, 60, 1) 78%
	);
	box-shadow: -25px 30px 17px rgba(241, 135, 99, 0.2);
	z-index: 3;
	right: 8%;
	top: -32%;
	transform: rotate(-25deg);
}

.pig-tails {
	position: absolute;
	width: 15%;
	height: 65%;
	border-radius: 15% 78% 0% 100% / 41% 61% 30% 59%;
	background: rgb(255, 227, 35);
	background: linear-gradient(
		-100deg,
		rgba(255, 227, 35, 1) 43%,
		rgba(242, 127, 60, 1) 78%
	);
	z-index: 3;
	right: -3%;
	top: 40%;
	transform: rotate(-8deg);
}

.left {
	position: absolute;
	left: 5%;
	top: -5%;
	z-index: 1;
}

.link-body {
	position: absolute;
	height: 45%;
	width: 55%;
	border-radius: 40%/80% 70% 40% 40%;
	background: rgb(69, 167, 91);
	background: linear-gradient(
		100deg,
		rgba(18, 109, 39, 1) 0%,
		rgba(69, 167, 91, 1) 26%,
		rgba(18, 109, 39, 1) 46%,
		rgba(7, 77, 0, 1) 70%,
		rgba.........完整代码请登录后点击上方下载按钮下载查看