div+css布局实现一个卡通女孩在电脑前工作代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现一个卡通女孩在电脑前工作代码

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

<html lang="en">

<head>
<style>
.cartoon {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.cartoon div {
	position:absolute;
	box-sizing:border-box
}
.b {
	border:.75vmin solid black
}
.r {
	border-radius:100%
}
.hb::before,.ha::after {
	content:"";
	display:block;
	position:absolute
}
html,body {
	overflow:hidden
}
.shadow {
	width:150%;
	height:106%;
	background:#ffc;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%) rotate(-15deg);
	overflow:hidden
}
.shadow::after {
	content:'<div class="cartoon"><div class="shadow ha r"></div> <div class="hair-back ha hb"></div><div class="neck"></div><div class="ear ha r"></div><div class="ear ha r"></div><div class="face"><div class="cheek r"></div><div class="cheek r"></div><div class="eye"><div class="pupil hb r"></div></div><div class="eye"><div class="pupil hb r"></div></div><div class="eyebrow r"></div><div class="nose r b"></div><div class="mouth r b"></div></div><div class="bangs-1 ha"></div><div class="bangs-2"></div><div class="body ha r"></div><div class="coffee hb"></div><div class="computer ha"></div><div class="table"></div></div>';
	transform:rotate(15deg);
	font-family:monospace,monospace;
	font-size:7.25vmin;
	word-break:break-all;
	left:0;
	top:0;
	width:100%;
	height:100%;
	color:rgba(0,0,0,0.0333)
}
.cartoon {
	--skin:#fca;
	#963;
	--line:#9639;
	#6309;
	--shadow:rgba(80,0,0,0.075);
	--hair:#630;
	#210;
	--shirt:#887389;
	--animation:"";
	width:80vmin;
	height:80vmin
}
.hair-back {
	width:60%;
	height:50%;
	background:var(--hair);
	border-radius:40% 40% 0 0;
	transform:translate(-50%,0);
	left:50%;
	top:5%;
	clip-path:polygon(-50% 0,150% 0,150% 100%,82% 100%,81% 96%,80% 100%,79.5% 98%,79% 100%,-50% 100%);
	clip-path:polygon(-50% 0,150% 0,150% 100%,100% 100%,98% 90%,99.5% 100%,98% 100%,97.25% 96%,97.5% 99.75%,75% 99%,74.5% 98%,74% 99%,50% 98%,10% 99.5%,9.75% 96%,9.5% 99.5%,-50% 100%);
	box-shadow:inset 0 0 0 100in rgba(0,0,0,0.2)
}
.hair-back::before {
	width:15%;
	height:100%;
	border-radius:50%;
	box-shadow:0 0 0 100in rgba(0,0,0,0.2),5vmin 0 0 5vmin var(--hair);
	left:-15%;
	top:5%;
	clip-path:polygon(50% 50%,150% 50%,150% 100%,50% 100%)
}
.hair-back::after {
	width:15%;
	height:100%;
	border-radius:50%;
	box-shadow:0 0 0 100in rgba(0,0,0,0.2),-5vmin 0 0 5vmin var(--hair);
	right:-15%;
	top:0;
	clip-path:polygon(-50% 50%,50% 50%,50% 100%,-50% 100%)
}
.face {
	width:50%;
	height:40%;
	background:var(--skin);
	border-radius:60% 60% 100% 100% / 100% 100% 60% 60%;
	transform:translate(-50%,0);
	left:50%;
	top:10%
}
.nose {
	width:10%;
	height:12%;
	border-color:var(--line);
	border-left:.25vmin solid transparent;
	top:60%;
	left:50%;
	transform:translate(-50%,0) rotate(-35deg)
}
.mouth {
	width:20%;
	height:20%;
	border-color:transparent;
	border-bottom:.75vmin solid var(--line);
	border-right:.25vmin solid transparent;
	transform:translate(-50%,0) rotate(30deg);
	top:63%;
	left:45%
}
.eye {
	width:20%;
	height:30%;
	background:white;
	border-radius:100% 60% 10% 20% / 100% 60% 100% 40%;
	top:30%;
	left:22%;
	overflow:hidden;
	box-shadow:0 -0.75vmin var(--shadow)
}
@keyframes eyemove {
	from {
	transform:translate(15%)
}
to {
	transform:translate(-15%)
}
}.pupil {
	width:5vmin;
	height:5vmin;
	background:#333;
	bottom:-0.5vmin;
	right:1vmin;
	animation:var(--animation) 1s alternate infinite
}
.eye+.eye {
	left:auto;
	right:22%;
	border-radius:60% 100% 20% 10% / 60% 100% 40% 100%
}
.eye+.eye .pupil {
	left:1vmin
}
.cheek {
	width:30%;
	height:10%;
	background:rgba(255,0,0,0.1);
	filter:blur(5px);
	top:60%;
	left:15%
}
.cheek+.cheek {
	left:auto;
	right:15%
}
.ear {
	width:12%;
	height:13%;
	background:var(--skin);
	top:25%;
	left:18%;
	box-shadow:inset -19.75vmin 0 0 -15.5vmin var(--shadow)
}
.ear::after {
	wid.........完整代码请登录后点击上方下载按钮下载查看