div+css绘制雪人效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css绘制雪人效果代码
代码标签： css 雪人
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
          height: 100vh;
          overflow: hidden;
          position: relative;
          background-color: lightskyblue;
          text-align: center;
        }
        
        div {
          position: absolute;
          left: 50%;
          top: 50%;
          transform:translate(-50%,-50%);
        }
        
        .face {
          width: 200px;
          height: 150px;
          background:white;
          top: 40%;
          border-radius: 46% 57% 65% 32% / 76% 59% 42% 26%;
        }
        
        .eye1 {
          width: 15px;
          height: 15px;
          background: black;
          top: 35%;
          left: 40%;
          border-radius: 50%;
        }
        
        .eye2 {
          width: 15px;
          height: 15px;
          background: black;
          top: 30%;
          left: 60%;
          border-radius: 50%;
        }
        
        .blush1 {
          width: 30px;
          height: 30px;
          background: pink;
          top: 40%;
          left: 70%;
          border-radius: 50%;
          transform: rotate(90deg);
        }
        
        .blush2 {
          width: 30px;
          height: 30px;
          background: pink;
          top: 40%;
          left: 25%;
          border-radius: 50%;
          transform: rotate(90deg);
        }
        
        .nose {
          width: 25px;
          height: 80px;
          background: orange;
          top: 12%;
          left: 63%;
          transform: rotate(50deg);
          border-radius: 50% 50% 40% 40% / 100% 100% 10% 10%;
          z-index: 2;
        }
        
        .teeth1 {
          width: 30px;
          height: 30px;
          background: white;
          top: 125%;
          left: 30%;
          z-index: -1;
          border-radius: 5px;
        }
        
        .teeth2 {
          width: 30px;
          height: 30px;
          background: white;
          top: 125%;
          left: 70%;
          z-index: -1;
          border-radius: 5px;
        }
        
        .body {
          width: 250px;
          height: 250px;
          background: white;
          top: 150%;
          border-radius: 40% 30% 30% 70% / 60% 40% 60% 40%;
          z-index: -1;
        }
        
        .feet1 {
          width: 100px;
          height: 80px;
          background: white;
          top: 200%;
          transform: rotate(30deg);
          left: -10%;
          border-radius: 50% 50% 59% 66% / 36% 65% 38% 65%;
          z-index: -1;
        }
        
        .feet2 {
          width: 100px;
          height: 80px;
          background: white;
          top: 200%;
          transform: rotate(-30deg);
          left: 60%;
          border-radius: 50% 50% 59% 66% / 36% 65% 38% 65%;
          z-index: -1;
        }
        
        .hat {
          width: 145px;
          height: 40px;
          background: crimson;
          border-radius: 46% 57% 65% 32% / 100% 100% 0% 0%;
          top: -20px;
          left: 60px;
          transform: translate(-50%, 0) rotate(160deg);
          z-index:-1;
        }
        
        .hat3 {
          width: 160px;
          height: 130px;
          background: black;
          border-radius: 46% 57% 65% 32% / 100% 100% 20% 20%;
          top: -90px;
          left: 50px;
          transform: translate(-50%, 0) rotate(160deg);
          z-index:-2;
        }
        
        .hat2 {
          width: 200px;
          height: 50px;
          background: black;
          border-radius: 40% 40% 40% 40% / 40% 40% 40% 40%;
          top: -10px;
          left: 70px;
          transform: translate(-50%, 0) rotate(-20deg);
          z-index:-1;
        }
        
        .mustache {
          width: 100px;
          height: 80px;
          background: white;
          border-radius: 50% 50% 59% 66% / 100% 100% 56% 51%;
          top: 155px;
          left: 20%;
          transform-origin: top right;
          transform: translate(-100%, 0) rotate(25deg);
          z-index: 1;
        }
        
        .mustache + .mustache {
          left: 170px;
          border-radius: 50% 50% 59% 66% / 100% 100% 56% 51%;
          transform-origin: top left;
          transform: rotate(-25deg);
        }
        
        .mouth {
          width: 65px;
          height: 50px;
          border: 5px solid black;
          border-radius: 50%;
          top: 63px;
          left: 70px;
          z-index: 1;
          transform: rotate(5deg);
          clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
        }
        
        
        .mouth_small {
          width: 15px;
          height: 10px;
          border: 3px solid black;
          border-radius: 50%;
          top: 80px;
          left: 60px;
          z-index: 1;
          transform: rotate(-25deg);
          clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
        }
        
        .button1 {
          width: 35px;
          height: 35px;
          background: crimson;
          top: 180%;
          left: 65%;
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
        }
        
        .button2 {
          width: 35px;
          height: 35px;
          background: crimson;
          top: 140%;
          left: 65%;
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
        }
        
        .dot1 {
          width: 5px;
          height: 5px;
          background: black;
          top: 175%;
          left: 63%;
          border-radius: 50%;
        }
        
        .dot2 {
          width: 5px;
          height: 5px;
          background: black;
          top: 175%;
          left: 67%;
          border-radius: 50%;
        }
        
        .dot3 {
          width: 5px;
          height: 5px;
          background: black;
          top: 182%;
          left: 63%;
          border-radius: 50%;
        }
        
        .dot4 {
          width: 5px;
          height: 5px;
          background: black;
          top: 182%;
          left: 67%;
          border-radius: 50%;
        }
        
        .dot5 {
          width: 5px;
          height: 5px;
          background: black;
          top: 135%;
          left: 63%;
          border-radius: 50%;
        }
        
        .dot6 {
          width: 5px;
          height: 5px;
          background: black;
          top: 135%;
          left: 67%;
          border-radius: 50%;
        }
        
        .dot7 {
          width: 5px;
          height: 5px;
          background: black;
          top: 142%;
          left: 63%;
          border-radius: 50%;
        }
        
        .dot8 {
          width: 5px;
          height: 5px;
          background: black;
          top: 142%;
          left: 67%;
          border-radius: 50%;
        }
        
        .scarf1 {
          width: 160px;
          height: 40px;
          background: green;
          top: 100%;
          left: 40%;
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
        }
        
        .scarf2 {
          width: 100px;
          height: 40px;
          background: green;
          top: 80%;
          left: 55%;
          transform: rotate(-30deg);
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
        }
        
        .scarf3 {
          width: 70px;
          height: 60px;
          background: green;
          top: 85%;
          left: 45%;
          transform: rotate(-30deg);
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
        }
        
        .scarf4 {
          width: 60px;
          height: 130px;
          background: green;
          top: 90%;
          left: 16%;
          transform: rotate(40deg);
          border-radius: 50% 50% 31% 45% / 36% 65% 5% 65%;
        }
        
        .scarf5 {
          width: 60px;
          height: 70px;
          background: green;
          top: 90%;
          left: 70%;
          transform: rotate(-40deg);
          z-index: 1;
          border-radius: 50% 50% 31% 66% / 36% 65% 0% 65%;
        }
        
        
        .tree1 {
          width: 7px;
          height: 125px;
          background: brown;
          top: -90%;
          left: 0%;
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
          transform: rotate(-20deg);
          z-index: -3;
        }
        
        .tree2 {
          width: 7px;
          height: 85px;
          background: brown;
          top: -90%;
          left: 0%;
          border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
          transform: rotate(10.........完整代码请登录后点击上方下载按钮下载查看