css绘制一个雪人效果代码-html代码-BFW代码库

代码语言：html

代码描述：css绘制一个雪人效果代码

代码标签： css 雪人

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          margin: 0;
          height: 100vh;
          overflow: hidden;
          background: linear-gradient(#adf, #ddd);
        }
        
        
        .canvas {
          width: 80vmin;
          height: 80vmin;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .canvas *,
        .canvas *::before,
        .canvas *::after {
          position: absolute;
          box-sizing: border-box;
          display: block;
        } 
        
        .head {
          width: 43%;
          height: 33%;
          background:
            radial-gradient(170% 100% at 50% 0%, #0005, #0001 37%, #0000 0)
            ;
          background-color: #fff;
          border-radius: 100% / 90% 90% 110% 110%;
          top: 24%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow:
            inset 2vmin 0 6vmin 1vmin #fffa,
            inset -2vmin 0 6vmin 1vmin #fffa,
            inset 0 0 4vmin 1vmin #0004,
            0 0.25vmin 0 1vmin
            ;
        }
        
        .body {
          width: 59%;
          height: 50%;
          background:
            linear-gradient(45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat 118% 47% / 20% 20%,
            linear-gradient(-45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat -15% 45% / 20% 20%,
            radial-gradient(100% 100% at 50% 0%, #0001 34%, #0000 0)
            ;
          background-color: #fff;
          border-radius: 100% / 110% 110% 90% 90%;
          bottom: 0%;
          left: 50%;
          transform: translateX(-50%);
          box-shadow:
             inset 3vmin 0 5vmin #fffa,
            inset -3vmin 0 5vmin #fffa,
            inset 0 0 6vmin #0004,
            0 0.25vmin 0 1vmin
            ;
        }
        
        .scarf {
          width: 37%;
          height: 25%;
          border-radius: 50%;
          background: #d00;
          box-shadow:
            inset 3vmin 1vmin 3vmin -2vmin #fffa,
            inset -3vmin 2vmin 3vmin -2vmin #fffa,
            inset 0 -1vmin 2vmin #8008,
            0 0.25vmin 0 1vmin;
          top: 38%;
          left: 50%;
          transform: translate(-50%);
        }
        
        .scarf-hanging {
          width: 10%;
          height: 20%;
          background: #d00;
          top: 50%;
          left: 58%;
          border-radius: 100% 100% 100% 100% / 20% 140% 30% 10%;
          transform: rotate(-3deg);
          box-shadow: 
            inset 3vmin 1vmin 3vmin -2vmin #fff7,
            inset -3vmin 2vmin 3vmin -2vmin #fff7,
            inset 0 -1vmin 2vmin #8008,
            0 0.25vmin 0 1vmin;
        }
        
        .thread {
          top: 67%;
          left: 56.5%;
          width: 13.33%;
          height: 7%;
          border-radius: 100% / 50%;
          transform: rotate(-4deg);
          background:
            repeating-linear-gradient(to right, #0000 0 7%, #000 7.5% 14%, #0000 0 14.5%)
        }
        
        .button {
          box-shadow: 0 0.25vmin 0 0.8vmin;
          background:
            radial-gradient(circle at 35% 35%, #fff3 20%, #0000 )
            ;
          background-color: black;
          width: 7%;
          height: 9%;
          border-radius: 100% 90% 110% 100%;
          top: 40%;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .button + .button {
          top: 60%;
          transform: translateX(-50%) rotate(20deg);
        }
        
        .eye {
          --pos: 20%;
          box-shadow: 
            inset 0 0 1vmin 0.125vmin #000,
            inset -0.5vmin -0.5vmin 1vmin #000,
            inset -1.5vmin -1vmin 2vmin #fffb,
            0.25vmin 1.25vmin 0 0.8vmin #0002,
            0 0.25vmin 0 0.8vmin;
          background-color: #222;
          width: 13%;
          height: 22%;
          border-radius: 100% 90% 110% 100%;
          top: 38%;
          left: var(--pos);
          transform: rotate(10deg);
          overflow: hidden;
        }
        
        .eye + .eye {
          left: auto;
          right: var(--pos);
        }
        
        .eye::before {
          content: "";
          width: 45%;
          height: 50%;
          background: #fff;
          border-radius: 100%;
          top: 15%;
          left: 10%;
          transform: rotate(15deg);
          box-shadow: 0 0 3vmin 1.5vmin #000;
        }
        
        .mouth {
          width: 12%;
          height: 16%;
          border-radius: 100% 90% 110% 100%;
          top: 70%;
          left: 50%;
          transform: translate(-50%) rotate(3deg);
          border:0.6vmin solid;
          border-bottom-width: 0.9vmin;
          clip-path: polygon(-20% 40%, 120% 30%, 120% 120%, -20% 120%)
        }
        
        .nose {
          width: 15%;
          height: 11%;
          background:
            linear-gradient(#ff05, #0000, #d805)
            ;
          background-color: #fa0;
          border-radius: 150% 60% 60% 150% / 100%;
          left: 45%;
          top: 55%;
          transform: translate(-50%, 0);
          box-.........完整代码请登录后点击上方下载按钮下载查看