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