css布局实现爱读书的小女孩代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现爱读书的小女孩代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
    box-sizing: border-box;
}

*::before, *::after {
    content: "";
    display: block;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    --bg: #48ffa4;
    overflow: hidden;
    background: var(--bg);
    --unitSize: 1.25vmin;
}

.traceTemplate {
    position: absolute;
    height: calc(var(--unitSize) * 80);
    display: none;
    opacity: 0.2;
    /*transform: rotate(145deg);*/
}

.canvas {
    height: calc(var(--unitSize) * 80);
    width: calc(var(--unitSize) * 64);
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
    position: relative;
}

.canvas * {
    position: absolute;
}

.tina {
/*    outline: calc(var(--unitSize) * 0.1) solid red;*/
/*    width: 100%;*/
/*    height: 100%;*/
    left: calc(var(--unitSize) * 16);
    top: calc(var(--unitSize) * 3.3);
    --skin: #fef0d1;
    --cheek: pink;
    --semiblack: #4b4b4b;
    --bookBack: #5E2D31;
    --bookFront: #8d422c;
    --bookHeart: #E85764;
    --shirtLight: #93a8fb;
    --shirtDark: #5065b7;
    z-index: 1;
    /*opacity: 0.3*/
}

.face {
    border-radius: 50%;
    outline: calc(var(--unitSize) * 0.1) solid;
    width: calc(var(--unitSize) * 16.4);
    height: calc(var(--unitSize) * 18.6);
    top: calc(var(--unitSize) * 3.3);
    left: calc(var(--unitSize) * 10.3);
    transform: rotate(43deg);
    overflow: hidden;
    background: var(--skin);
    z-index: 2;
}

.faceTransform {
    left: calc(var(--unitSize) * 8.2);
    top: calc(var(--unitSize) * 9.3);
    transform: rotate(-43deg);
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
}

.eyeglassesEye {
    height: calc(var(--unitSize) * 3);
    width: calc(var(--unitSize) * 4.5);
    border-radius: 1% 1% 50% 50% / 1% 1% 50% 50%;
    outline: calc(var(--unitSize) * 0.6) solid;
    left: calc(var(--unitSize) * -6.8);
    top: calc(var(--unitSize) * -2.9);
}

.eyeglasses2 {
    left: calc(var(--unitSize) * 0.9);
}

.eyeglassesP1 {
    width: calc(var(--unitSize) * 3);
    height: calc(var(--unitSize) * 0.5);
    border: calc(var(--unitSize) * 0.4) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * -2.6);
    left: calc(var(--unitSize) * -2.1);
}

.eyeglassesP2 {
    width: calc(var(--unitSize) * 2);
    height: calc(var(--unitSize) * 0.4);
    border: calc(var(--unitSize) * 0.2) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * -2);
    left: calc(var(--unitSize) * -8.9);
    transform: rotate(340deg);
}

.eyeglassesP3 {
    width: calc(var(--unitSize) * 1.8);
    height: calc(var(--unitSize) * 0.4);
    border: calc(var(--unitSize) * 0.2) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * -2.5);
    left: calc(var(--unitSize) * 5.5);
    transform: rotate(11deg);
}

.eye {
    width: calc(var(--unitSize) * 2.6);
    height: calc(var(--unitSize) * 0.8);
    border: calc(var(--unitSize) * 0.3) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * -1.9);
    left: calc(var(--unitSize) * -5.7);
    transform: rotate(354deg);
}

.eye2 {
    left: calc(var(--unitSize) * 2);
    transform: rotate(6deg);
}

.eyebrow {
    width: calc(var(--unitSize) * 2.7);
    height: calc(var(--unitSize) * 0.4);
    border: calc(var(--unitSize) * 0.3) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * -4.8);
    left: calc(var(--unitSize) * -5.3);
    transform: rotate(-7deg);
}

.eyebrow2 {
    transform: rotate(10deg);
    left: calc(var(--unitSize) * 1.6);
}

.nose {
    /*outline: calc(var(--unitSize) * 0.1) solid red;*/
    left: calc(var(--unitSize) * 2);
}

.noseP1 {
    width: calc(var(--unitSize) * 2.1);
    height: calc(var(--unitSize) * 0.4);
    border: calc(var(--unitSize) * 0.2) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * 0.2);
    left: calc(var(--unitSize) * -3);
    transform: rotate(259deg);
}

.noseP2 {
    width: calc(var(--unitSize) * 2.7);
    height: calc(var(--unitSize) * 1.2);
    border: calc(var(--unitSize) * 0.2) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * 1.6);
    left: calc(var(--unitSize) * -4);
    transform: rotate(160deg);
}

.mouth {
    width: calc(var(--unitSize) * 5.8);
    height: calc(var(--unitSize) * 1.2);
    border: calc(var(--unitSize) * 0.3) solid;
    border-bottom: 0;
    border-radius: 50% / 100% 100% 0 0;
    top: calc(var(--unitSize) * 4.4);
    left: calc(var(--unitSize) * -3.8);
    transform: rotate(179deg);
}

.cheek {
    width: calc(var(--unitSize) * 4.1);
    aspect-ratio: 1/1;
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
    border-radius: 50%;
    top: calc(var(--unitSize) * 1.7);
    left: calc(var(--unitSize) * -10);
    background: var(--cheek);
}

.cheek2 {
    width: calc(var(--unitSize) * 3.8);
    left: calc(var(--unitSize) * 3.9);
    top: calc(var(--unitSize) * 1.9);
}

.hairSegment1 {
    border-radius: 50%;
    outline: calc(var(--unitSize) * 0.1) solid;
    width: calc(var(--unitSize) * 22.3);
    height: calc(var(--unitSize) * 16.4);
    left: calc(var(--unitSize) * 6.6);
    transform: rotate(-5deg);
    z-index: 1;
    background: black;
}

.hairSegment2 {
    top: calc(var(--unitSize) * 14);
    left: calc(var(--unitSize) * 7);
}


.hairSegment2I {
    background: var(--semiblack);
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
    height: calc(var(--unitSize) * 6);
    width: calc(var(--unitSize) * 1.4);
    left: calc(var(--unitSize) * 1);
    top: calc(var(--unitSize) * -0.9);
    border-radius: 50% / 15%;
    transform: rotate(25deg);
}

.hairSegment2I:nth-of-type(2) {
    left: calc(var(--unitSize) * 2.1);
    width: calc(var(--unitSize) * 1.5);
    top: calc(var(--unitSize) * -0.6);
}

.hairSegment2I:nth-of-type(3) {
    left: calc(var(--unitSize) * 3.4);
    top: calc(var(--unitSize) * -0.4);
}

.hairSegment2I:nth-of-type(4) {
    left: calc(var(--unitSize) * 4.7);
    top: calc(var(--unitSize) * -0.3);
}

.hairSegment3 {
    width: 100%;
    height: 100%;
    top: calc(var(--unitSize) * 5);
    z-index: 2;
}

.hairSegment3I {
    background: black;
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
}

.hairSegment3I1 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 11.5);
    height: calc(var(--unitSize) * 3.3);
    top: calc(var(--unitSize) * 8.1);
    left: calc(var(--unitSize) * 1.6);
    transform: rotate(300deg);
}

.hairSegment3I2 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 9.5);
    height: calc(var(--unitSize) * 3.4);
    top: calc(var(--unitSize) * 8.5);
    left: calc(var(--unitSize) * 0.5);
    transform: rotate(301deg);
}

.hairSegment3I3 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 6.4);
    height: calc(var(--unitSize) * 2.4);
    top: calc(var(--unitSize) * 9.7);
    left: calc(var(--unitSize) * 0);
    transform: rotate(306deg);
}

.hairSegment3I4 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 1.7);
    height: calc(var(--unitSize) * 3.4);
    top: calc(var(--unitSize) * 10.1);
    left: calc(var(--unitSize) * 0.8);
    transform: rotate(248deg);
}

.hairSegment3I5 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 12.5);
    height: calc(var(--unitSize) * 3.7);
    top: calc(var(--unitSize) * 1.4);
    left: calc(var(--unitSize) * 1.5);
    transform: rotate(297deg);
}

.hairSegment3I6 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 9.5);
    height: calc(var(--unitSize) * 3.4);
    top: calc(var(--unitSize) * 7.4);
    left: calc(var(--unitSize) * 0.4);
    transform: rotate(293deg);
}

.hairSegment3I7 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 9.5);
    height: calc(var(--unitSize) * 0.7);
    top: calc(var(--unitSize) * 7.4);
    left: calc(var(--unitSize) * -1);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(123deg);
}

.hairSegment3I8 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 9.3);
    height: calc(var(--unitSize) * 3.8);
    top: calc(var(--unitSize) * 5);
    left: calc(var(--unitSize) * -2.4);
    background: var(--bg);
    transform: rotate(119deg);
}

.hairSegment3I9 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 5.7);
    height: calc(var(--unitSize) * 0.7);
    top: calc(var(--unitSize) * 3);
    left: calc(var(--unitSize) * 8.4);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(291deg);
}

.hairSegment3I10 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.3);
    height: calc(var(--unitSize) * 1.8);
    top: calc(var(--unitSize) * -0.7);
    left: calc(var(--unitSize) * 13.2);
    transform: rotate(314deg);
}

.hairSegment3I11 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.3);
    height: calc(var(--unitSize) * 2.4);
    top: calc(var(--unitSize) * -1.7);
    left: calc(var(--unitSize) * 15.8);
    transform: rotate(314deg);
}

.hairSegment3I12 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.3);
    height: calc(var(--unitSize) * 2.4);
    top: calc(var(--unitSize) * -1.7);
    left: calc(var(--unitSize) * 18.4);
    transform: rotate(314deg);
}

.hairSegment3I13 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.3);
    height: calc(var(--unitSize) * 2.4);
    top: calc(var(--unitSize) * -1.5);
    left: calc(var(--unitSize) * 20.6);
    transform: rotate(314deg);
}

.hairSegment3I4 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 1.7);
    height: calc(var(--unitSize) * 3.4);
    top: calc(var(--unitSize) * 9.9);
    left: calc(var(--unitSize) * 0.7);
    transform: rotate(248deg);
}

.hairSegment3I15 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 5.3);
    height: calc(var(--unitSize) * 2.4);
    top: calc(var(--unitSize) * 2);
    left: calc(var(--unitSize) * 23);
    transform: rotate(254deg);
}

.hairSegment3I16 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 8.8);
    height: calc(var(--unitSize) * 3.5);
    top: calc(var(--unitSize) * 6.6);
    left: calc(var(--unitSize) * 24.8);
    transform: rotate(270deg);
}
.hairSegment3I17 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.7);
    height: calc(var(--unitSize) * 1.9);
    top: calc(var(--unitSize) * 11.7);
    left: calc(var(--unitSize) * 26.3);
    transform: rotate(127deg);
}

.hairSegment3I18 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 3.7);
    height: calc(var(--unitSize) * 1.8);
    top: calc(var(--unitSize) * 12);
    left: calc(var(--unitSize) * 25.3);
    transform: rotate(309deg);
}

.hairSegment3I19 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.5);
    height: calc(var(--unitSize) * 2.1);
    top: calc(var(--unitSize) * 11);
    left: calc(var(--unitSize) * 24.1);
    transform: rotate(305deg);
}

.hairSegment3I20 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 4.1);
    height: calc(var(--unitSize) * 1.6);
    top: calc(var(--unitSize) * 10.9);
    left: calc(var(--unitSize) * 23.3);
    transform: rotate(314deg);
}

.hairSegment3I21 {
    border-radius: 50%;
    width: calc(var(--unitSize) * 2.6);
    height: calc(var(--unitSize) * 1);
    top: calc(var(--unitSize) * 11.5);
    left: calc(var(--unitSize) * 22.9);
    transform: rotate(347deg);
}

.hairSegment3I22 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 5.7);
    height: calc(var(--unitSize) * 1);
    top: calc(var(--unitSize) * 9.5);
    left: calc(var(--unitSize) * 22.2);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(123deg);
}
.hairSegment3I23 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 4.6);
    height: calc(var(--unitSize) * 0.7);
    top: calc(var(--unitSize) * 6.4);
    left: calc(var(--unitSize) * 23.9);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(70deg);
}
.hairSegment3I29 {
    border-radius: 100% 0 0 0;
    width: calc(var(--unitSize) * 2.5);
    height: calc(var(--unitSize) * 1.9);
    top: calc(var(--unitSize) * -0.2);
    left: calc(var(--unitSize) * 22.9);
    background: none;
    border: calc(var(--unitSize) * 1) solid ;
    border-bottom: 0;
    border-right: 0;
    transform: rotate(77deg);
}

.hairSegment3I24 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 4.6);
    height: calc(var(--unitSize) * 0.7);
    top: calc(var(--unitSize) * 6.9);
    left: calc(var(--unitSize) * 23.8);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(95deg);
}

.hairSegment3I25 {
    border-radius: 50% / 100% 100% 0 0;
    width: calc(var(--unitSize) * 4.6);
    height: calc(var(--unitSize) * 0.7);
    top: calc(var(--unitSize) * 6.9);
    left: calc(var(--unitSize) * 23.8);
    background: none;
    border: calc(var(--unitSize) * 0.5) solid;
    border-bottom: 0;
    transform: rotate(86deg);
}

.hairSegment3I26 {
    width: calc(var(--unitSize) * 5);
    height: calc(var(--unitSize) * 3.2);
    top: calc(var(--unitSize) * 9.1);
    left: calc(var(--unitSize) * 24.2);
    transform: rotate(122deg);
}

.hairSegment3I27 {
    width: calc(var(--unitSize) * 5);
    height: calc(var(--unitSize) * 3.2);
    top: calc(var(--unitSize) * 5.2);
    left: calc(var(--unitSize) * 25.4);
    transform: rotate(89deg);
}

.hairSegment3I28 {
    width: calc(var(--unitSize) * 5);
    height: calc(var(--unitSize) * 3.2);
    top: calc(var(--unitSize) * 2.7);
    left: calc(var(--unitSize) * 25.7);
    transform: rotate(65deg);
}

.head {
    z-index: 1;
}

.body {
    z-index: 0;
    top: calc(var(--unitSize) * 21);
}

.neck {
    /*outline: calc(var(--unitSize) * 0.1) solid;*/
    width: calc(var(--unitSize) * 13.5);
    aspect-ratio: 1/1;
    border-radius: 50%;
    top: calc(var(--unitSize) * -8.2);
    overflow: hidden;
    background: var(--skin);
    left: calc(var(--unitSize) * 11.4);
    z-index: 1;
}

.neck::before, .neck::after {
    position: absolute;
    border-radius: 50%;
    outline: calc(var(--unitSize) * 0.1) solid;
    width: calc(var(--unitSize) * 14.8);
    height: calc(var(--unitSize) * 6.8);
    background: var(--bg);
    z-index: 1;
}

.neck::before {
    top: calc(var(--unitSize) * 5.7);
    left: calc(var(--unitSize) * -9.9);
    transform: rotate(3deg);
}

.neck::after {
    top: calc(var(--unitSize) * 4.2);
    left: calc(var(--unitSize) * 8.2);
    transform: rotate(161deg);
}

.neckStroke {
    width: 100%;
    height: 100%;
    border: calc(var(--unitSize) * 0.1) solid;
    border-radius: 50%;
}

.shirt {
    width: calc(var(--unitSize) * 10);
    height: calc(var(--unitSize) * 10);
    top: calc(var(--unitSize) * 3.5);
    left: calc(var(--unitSize) * 8.2);
}

.shirtP1 {
    background: var(--shirtLight);
    width: calc(var(--unitSize) * 13.5);
    height: calc(var(--unitSize) * 7.4);.........完整代码请登录后点击上方下载按钮下载查看