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