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

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

代码语言：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;
	cl.........完整代码请登录后点击上方下载按钮下载查看