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