css绘制一个圣诞老人人物效果代码-html代码-BFW代码库

css绘制一个圣诞老人人物效果代码

代码语言：html

代码描述：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 {
          background: #9ac;
        }
        
        .drawing {
          --skin: #fca;
          --skindark: #fa9;
          --suit: #c00;
          --wool: #f0f0f0;
          width: 80vmin;
          height: 80vmin;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .drawing div,
        .drawing div::before,
        .drawing div::after {
          position: absolute;
          display: block;
          box-sizing: border-box;
        }
        
        .face {
          width: 35%;
          height: 25%;
          background: var(--skin);
          border-radius: 120% / 50%;
          left: 50%;
          top: 15%;
          transform: translateX(-50%);
          box-shadow: 
            inset 0 0.25vmin 1vmin var(--skindark),
            -0.25vmin -0.5vmin 0.5vmin #0001,
            0.5vmin -0.25vmin 0.5vmin #0002,
            -1vmin -5vmin var(--wool),
            1vmin -5vmin var(--wool)
            ;
        }
        
        .eye {
          width: 24%;
          height: 30%;
          border-radius: 100%;
          border: 0.25vmin solid #0000;
          border-top: 1vmin solid;
          top: 35%;
          left: 15%;
        }
        .eye + .eye {
          left: 61%;
        }
        
        .eyebrow {
          width: 35%;
          height: 30%;
          border-radius: 100%;
          box-shadow: -0.125vmin -2.2vmin 0 -0.5vmin #fff;
          top: 25%;
          left: 8%;
        }
        
        .eyebrow + .eyebrow {
          right: 7.5%;
          left: auto;
        }
        
        .nose {
          width: 20%;
          height: 30%;
          border-radius: 100% / 120% 120% 80% 80%;
          background: var(--skin);
          left: 50%;
          top: 55%;
          transform: translate(-50%, -50%);
          box-shadow: 
            inset -0.5vmin -0.5vmin 0.5vmin -0.25vmin var(--skindark),
            inset 0vmin -0.75vmin 0.5vmin -0.25vmin var(--skindark),
            inset 0.5vmin -1vmin 1vmin -0.75vmin var(--skindark);
        }
        
        .mustache {
          width: 30%;
          height: 30%;
          background: white;
          border-radius: 100% 0;
          top: 59%;
          left: 50%;
          transform: translate(-100%, 0) rotate(15deg);
          box-shadow: inset -0.25vmin -0.25vmin 0.75vmin #0002
        }
        
        .mustache + .mustache {
          transform: scaleX(-1) translate(0, 0) rotate(15deg);
        }
        
        .lip {
          width: 14%;
          height: 10%;
          background: var(--skindark);
          box-shadow: inset 0 -0.25vmin 0.75vmin #f003;
          border-radius: 50%;
          top: 73%;
          left: 50%;
          transform: translateX(-50%);
        }
        
        .beard {
          width: 100%;
          height: 100%;
          background: #fff;
          position: absolute;
          top: 70%;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 100% / 20% 20% 120% 120%;
          abox-shadow: 0 0.5vmin #ddd;
          afilter: drop-shadow(0 0.5vmin 0.5vmin #0002);
        }
        
        .beard::before {
          content: "";
          width: 22%;
          height: 30%;
          border-radius: 50%;
          background: #fff;
          left: -7%;
          top: 8%;
          color: #fff;
          box-shadow:
            2vmin 7vmin 0 2.5vmin,
            6vmin 12vmin 0 1vmin,
            16vmin 12vmin 0 2vmin,
            22vmin 10vmin 0 1vmin,
            24vmin 6vmin 0 1.6vmin,
            26vmin 0
            ;
        }
        
        .ear {
          width: 25%;
          height: 35%;
          border-radius: 50%;
          top: 40%;
          left: -15%;
          background:
            radial-gradient(circle at 100% 50%, var(--skindark) 50%, #0000 0) no-repeat 30% 60% / 50% 80%
            ;
          background-color: var(--skin);
        }
        
        .ear + .ear {
          right: -15%;
          left: auto;
          top: 42%;
          background:
            radial-gradient(circle at 0% 50%, var(--skindark) 50%, #0000 0) no-repeat 70% 60% / 50% 80%
            ;
          background-color: var(--skin);
        }
        
        .cheek {
          width:.........完整代码请登录后点击上方下载按钮下载查看