使用html + css 绘制一个雪容融

首先我们先看一下要绘制的雪容融吧

从整体来看，就是圆形 还要面部带不规则形状，确定好之后，我们就一步一步的开始绘制吧。 我们就开始从头部开始绘制

<div class="container">
    <div class="head">
    </div>
</div>

    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .head {
      height: 200px;
      width: 240px;
      background-color: red;
      border-radius: 49%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 99;
      box-shadow: 10px 5px 20px rgb(133, 25, 25) inset, 1px 3px 8px rgb(83, 28, 28);
    }

现在我们就绘制出一个带阴影的圆了，阴影的感觉是为了从感官上看起来立体些，接下来我们就开始绘制脸部的不规则形状，这里我采用的是多个元素定位的方式实现的。

<div class="container">
    <div class="head">
        <!-- 圆球 -->
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
      <div class="bar bar-4"></div>
      <div class="bar bar-5"></div>
    </div>
</div>

     .bar {
      background-color: white;
      box-shadow: 3px 3px 2px rgb(133, 25, 25) inset;
      position: absolute;
      border-radius: 50%;
      z-index: -1;
    }

    .bar-1 {
      top: 80px;
      left: 42px;
      height: 35px;
      width: 48px;
    }
    .bar-2 {
      height: 44px;
      width: 65px;
      box-shadow: 3px 3px 2px rgb(133, 25, 25) inset;
      top: 64px;
      left: 75px;
    }
    .bar-3 {
      height: 55px;
      width: 48px;
      top: 55px;
      right: 80px;
      z-index: -2;
    }
    .bar-4 {
      height: 48px;
      width: 55px;
      top: 84px;
      right: 36px;
      z-index: -2;
      box-shadow: 3px 3px 2px rgb(133, 25, 25) inset, -3px 2px 2px rgb(133, 25, 25) inset;
    }
    .bar-5 {
      height: 60px;
      width: 145px;
      box-shadow: none;
      top: 90px;
      z-index: -2;
      box-shadow: 0px -3px 1px rgb(133 25 25) inset
    }

这样脸上的不规则形状就画好了，现在还看不出画的是啥，接下来我们继续绘制眼睛,并加上动画，对我们眨眼睛。

<div class="container">
    <div class="head">
        <!-- 脸 -->
      <div class="face">
        <div class="sea"></div>
        <div class="sea"></div>
      </div>
        <!-- 圆球 -->
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
      <div class="bar bar-4"></div>
      <div class="bar bar-5"></div>
    </div>
</div>

    .face {
      width: 120px;
      height: 40px;
      background-color: white;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-radius: 20px;
    }
    .sea {
      width: 16px;
      height: 24px;
      background-color: black;
      border-radius: 15px;
      position: relative;
      transition: .5s;
      animation: sea 1.5s cubic-bezier(0.58,-0.01, 0.7, 0.97) .5s infinite;
    }

    .sea::after {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: white;
      position: absolute;
      top: 3px;
      left: 3px;
      animation: seaTwo 1.5s cubic-bezier(0.58,-0.01, 0.7, 0.97) .5s infinite;
    }
    眼睛动画
    @keyframes sea {
      0% {
        height: 15px;
      }
      50% {
        height: 24px;
      }
      100% {
        height: 15px;
      }
    }
    @keyframes seaTwo {
      0% {
        transform: scale(.8);
      }
      50% {
        transform: scale(1);
      }
      100% {
        transform: scale(.8);
      }
    }

哈哈哈现在眼睛就画好了，看起来就很好，接下来我们绘制脸颊两侧的腮红,并加上动画

<div class="container">
    <div class="head">
        <!-- 脸 -->
      <div class="face">
        <div class="sea"></div>
        <div class="sea"></div>
      </div>
        <!-- 圆球 -->
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
      <div class="bar bar-4"></div>
      <div class="bar bar-5"></div>
      <!-- 腮红 -->
      <div class="blush blush-left"></div>
      <div class="blush blush-right"></div>
    </div>
</div>

.blush {
      width: 42px;
      height: 44px;
      background: white;
      border-radius: 50%;
      position: absolute;
      
    }

    .blush::after {
      content: '';
      width: 20px;
      height: 15px;
      background-color: pink;
      filter: blur();
      display: block;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      left: 10px;
      transform: rotate(-45deg);
      transition: .5s;
      opacity: 0;
      animation: blush 1.5s cubic-bezier(0.58,-0.01, 0.7, 0.97) .5s infinite;
    }

    .blush-left {
      left: 38px;
      transform: rotate(45deg);
      top: 101px;
      box-shadow: 1px 3px 0px rgb(133 25 25), -1px 3px 0px rgb(133 25 25);
    }
    .blush-right {
      right: 38px;
      transform: rotate(-45deg);
      top: 101px;
      box-shadow: 1px 3px 0px rgb(133 25 25), -1px 3px 0px rgb(133 25 25);
    }

    .blush-right::after {
      transform: rotate(45deg);
    }
       腮红动画
    @keyframes blush {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

绘制到了这里，基本上头部就差不多了，此时已经完成了一大半，很可爱的眨眼睛了，接下来我们绘制头部的挂饰

<div class="container">
    <div class="head">
        <!-- 帽子 -->
      <div class="hat">
        <div class="hat-doc doc-1"></div>
        <div class="hat-doc doc-2"></div>
        <div class="hat-doc doc-3"></div>

        <span></span>
      </div>
        <!-- 脸 -->
      <div class="face">
        <div class="sea"></div>
        <div class="sea"></div>
      </div>
        <!-- 圆球 -->
      <div class="bar bar-1"></div>
      <div class="bar bar-2"></div>
      <div class="bar bar-3"></div>
      <div class="bar bar-4"></div>
      <div class="bar bar-5"></div>
      <!-- 腮红 -->
      <div class="blush blush-left"></div>
      <div class="blush blush-right"></div>
    </div>
</div>

    .hat {
      width: 100px;
      height: 25px;
      background-color: white;
      position: absolute;
      top: -1px;
      border-radius: 50%;
      box-shadow: 0px 5px 5px rgb(133, 25, 25)
    }

    .hat > span {
      width: 30px;
      height: 18px;
      background-color: white;
      position: absolute;
      border-radius: 50%;
      left: 33px;
      top: -11px;
    }

    .hat-doc {
      background-color: white;
      position: absolute;
      top: 14px;
      
      border-radius: 45%;
    }

    .doc-1 {
      left: 12px;
      width: 25px;
      height: 20px;
      border: 2px solid #ffe082;
      border-radius: 50%;
      top: -15px;
      box-shadow: 3px 2px 1px #ffe082 inset, -3px -2px 1px #ffe082 inset;
    }
    .doc-2 {
      left: 30px;
      width: 30px;
      height: 25px;
      /* border: 5px solid #ffe082; */
      border-radius: 50%;
      top: -35px;
      box-shadow: 0px 5px 1px #ffe082 inset, 5px 1px 1px #ffe082 inset, -5px 1px 1px #ffe082 inset;
    }
    .doc-3 {
      width: 25px;
      height: 20px;
      border: 2px solid #ffe082;
      border-radius: 50%;
      top: -15px;
      right: 18px;
      box-shadow: -2px 3px 1px #ffe082 inset, -2px -2px 1px #ffe082 inset;
    }

写到这里我们就已经完成了雪容融的头部了，接下来我们就绘制身体部分

<div class="container">
    <div class="head">
        ...
    </div>
    <div class="body-main">
      <div class="belly">
        <span>BEIJIN 2022</span>
        <div class="circular cir-1"></div>
        <div class="circular cir-2"></div>
        <div class="circular cir-3"></div>
        <div class="circular cir-4"></div>
        <div class="circular cir-5"></div>
      </div>
    </div>
</div>

```css
    .body-main {
      height: 120px;
      width: 120px;
      background-color: red;
      border-radius: 35px;
      position: relative;
      top: -20px;
      box-shadow: 2px 3px 12px rgb(133, 25, 25) inset, -2px 3px 12px rgb(133, 25, 25) inset;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .belly {
      background-color: white;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      margin-bottom: 15px;
      position: relative;
    }

    .belly > span {
      transform: scale(.6);
      font-size: 12px;
      position: absolute;
      top: 8px;
      width: 100px;
      left: -13px;
      font-weight: bold;
    }

    .circular {
      width: 12px;
      height: 12px;
      border: 2px solid blue;
      border-radius: 50%;
      position: absolute;
    }

    .cir-1 {
      top: 25px;
      left: 10px;
      z-index: 1;
    }
    .cir-2 {
      top: 25px;
      left: 20px;
      border-color: black;
      z-index: 2;
    }
    .cir-3 {
      top: 25px;
      left: 30px;
      border-color: red;
      z-index: 3;
    }
    .cir-4 {
      top: 35px;
      left: 16px;
      border-color: yellow;
      z-index: 1;
    }
    .cir-5 {
      top: 35px;
      left: 26px;
      border-color: green;
      z-index: 1;
    }

肚子部分就完成啦，接下来就是绘制手和脚了

<div class="container">
    <div class="head">
        ...
    </div>
    <div class="body-main">
      <div class="belly">
        <span>BEIJIN 2022</span>
        <div class="circular cir-1"></div>
        <div class="circular cir-2"></div>
        <div class="circular cir-3"></div>
        <div class="circular cir-4"></div>
        <div class="circular cir-5"></div>
      </div>
      
      <!-- 手 -->
      <div class="hand hand-left"></div>
      <div class="hand hand-right"></div>
      <!-- 脚 -->
      <div class="foot foot-left"></div>
      <div class="foot foot-right"></div>
    </div>
</div>

.hand {
      height: 35px;
      width: 80px;
      background-color: red;
      position: absolute;
      z-index: -1;
      box-shadow: 2px 5px 4px #ccc;
    }

    .hand-left {
      top: 15px;
      left: -50px;
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px;
      transform: rotate(10deg);
      transition: .3s;
      animation: hand 2s linear .5s infinite;
    }

    .hand-right {
      top: 15px;
      right: -50px;
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      transition: .3s;
      animation: handright 2s linear .5s infinite;
    }


    .foot {
      height: 53px;
      width: 35px;
      background-color: red;
      position: absolute;
      top: 97px;
      
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      z-index: -1;

      box-shadow: 2px 3px 5px #a1887f;
    }

    .foot::after {
      content: '';
      width: 25px;
      height: 10px;
      display: block;
      background-color: #ffe082;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      position: absolute;
      bottom: 2px;
      left: 5px;

    }

    .foot-left {
      left: 20px;
    }

    .foot-right {
      right: 20px;
    }
    
   手摆动动画
   @keyframes hand {
      0% {
        transform: rotate(20deg);
      }
      50% {
        transform: rotate(5deg);
      }
      100% {
        transform: rotate(20deg);
      }
    }
    @keyframes handright {
      0% {
        transform: rotate(-20deg);
      }
      50% {
        transform: rotate(5deg);
      }
      100% {
        transform: rotate(-20deg);
      }
    }

现在已经完成了百分之90，最后加上围脖就完美收工啦。我们开始绘制围脖。

<div class="container">
    <div class="head">
        ...
    </div>
    <div class="body-main">
      <div class="belly">
        <span>BEIJIN 2022</span>
        <div class="circular cir-1"></div>
        <div class="circular cir-2"></div>
        <div class="circular cir-3"></div>
        <div class="circular cir-4"></div>
        <div class="circular cir-5"></div>
      </div>
      <!-- 围脖 -->
      <div class="bib"></div>
      <!-- 手 -->
      <div class="hand hand-left"></div>
      <div class="hand hand-right"></div>
      <!-- 脚 -->
      <div class="foot foot-left"></div>
      <div class="foot foot-right"></div>
    </div>
</div>

.bib {
      height: 30px;
      width: 120px;
      background-color: #ffe082;
      position: absolute;
      top: 5px;
      z-index: 99;
      border-radius: 16px 16px 36px 30px;
      box-shadow: 2px 3px 4px rgb(83, 28, 28);
    }

    .bib::before {
      content: '';
      display: block;
      width: 30px;
      height: 70px;
      background-color: #ffe082;
      position: absolute;
      transform: skew(-28deg , 6deg);
      top: 5px;
      left: 10px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 5px;
    }

大功告成，这样一个通过 html css 绘制的雪容融就完成啦!还挺有意思的。只不过头部的条纹没有绘制出来，围巾的细节，动画的不足等等