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

代码语言:html

所属分类:布局界面

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

代码标签: 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"><.........完整代码请登录后点击上方下载按钮下载查看

网友评论0