<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>冰墩墩</title>
</head>
<body>
  <div class="bing-dun-dun-box">
    <div class="bing-dun-dun-body"></div>

    <div class="ear-left"></div>

    <div class="ear-right"></div>

    <div class="eye-left"></div>

    <div class="eye-right"></div>

    <div  class="face circle-blue"></div>

    <div  class="face circle-red"></div>

    <div class="face circle-purple"></div>

    <div  class="face circle-yellow"></div>

    <div class="face circle-green"></div>
    <div class="nose"></div>
    <div  class="mouse"></div>
    <div  class="hand-left"></div>
    <div  class="hand-right"></div>
    <div  class="foot-left"></div>
    <div  class="foot-right"></div>
  </div>

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      /* font: 15px "Microsoft YaHei", Arial,Helvetica, sans-serif; */
      /* background: #d4ebf1; */
      color: #000;
    }
    .bing-dun-dun-box{
      position: absolute;
      left: calc((100vw - 510px) / 2 - 45px);
      top: calc((100vh - 480px) / 2 - 15px) ;
    }
    .bing-dun-dun-body {
      width: 362px;
      height: 410px;
      border: #393939 8px solid;
      margin: 50px auto;
      border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
      position: absolute;
      left: 109px;
      top: -30px;
      color: #ffffff20;
    }
    .ear-left,.ear-right {
      background: #393939;
      width: 81px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
      z-index: -1;
    }
    .ear-left {
      left: 150px;
      top: 26px;
      transform: rotate(-10deg);
    }
    .ear-right{
      left: 362px;
      top: 28px;
      transform: rotate(10deg);
    }
    .eye-left,.eye-right {
      background: #393939;
      width: 83px;
      height: 115px;
      border-radius: 50%;
      position: absolute;
      
    }
    .eye-left {
      left: 180px;
      top: 122px;
      transform: rotate(45deg);
    }
    .eye-right{
      left: 329px;
      top: 122px;
      transform: rotate(-45deg);
    }
    .eye-left::before,.eye-right::before {
      content: '';
      width: 40px;
      height: 40px;
      border: #ffffff20 5px solid;
      border-radius: 100%;
      position: absolute;
      
    }
    .eye-left::before {
      right: 10px;
      top: 22px;
    }
    .eye-right::before {
      left: 10px;
      top: 22px;
    }
    .eye-left::after,.eye-right::after {
      content: '';
      width: 10px;
      height: 10px;
      background: #9b9b9b;
      border-radius: 100%;
      position: absolute;
      
    }
    .eye-left::after {
      right: 27px;
      top: 31px;
    }
    .eye-right::after {
      left: 41px;
      top: 44px;
    }
    .face {
      position: absolute;
      border-radius: 48%  48% 44% 49% / 53% 54% 45% 47%;
    }
    .circle-blue {
      border: #6bcdf3 5px solid;
      width: 280px;
      height: 224px;
      left: 150px;
      top: 78px;
    }
    .circle-red {
      border: #af2350 5px solid;
      width: 287px;
      height: 233px;
      left: 146px;
      top: 73px;
    }
    .circle-yellow {
      border: #ffc346 5px solid;
      width: 305px;
      height: 248px;
      left: 137px;
      top: 65px;
    }
    .circle-green {
      border: #7fcb58 5px solid;
      width: 313px;
      height: 256px;
      left: 133px;
      top: 61px;
    }
    .hand-left,.hand-right {
      background: #333;
      position: absolute;
      z-index: -1;
    }
    .hand-left {
      width: 75px;
      height: 118px;
      left: 64px;
      top: 244px;
      transform: rotate(45deg);
      border-radius: 24% 69% 68% 76% / 53% 95% 40% 52%;

    }
    .hand-right {
      width: 75px;
      height: 148px;
      left: 463px;
      top: 162px;
      transform: rotate(37deg);
      border-radius: 45% 62% 98% 6% / 40% 46% 80% 58%;
      
    }
    .hand-right::before {
      content: '';
      width: 16px;
      height: 24px;
      background: #bc242c;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(45deg);
      left: 32px;
      top: 20px;
      position: absolute;
      
    }
    .hand-right::after {
      content: '';
      width: 16px;
      height: 24px;
      background: #bc242c;
      border-top-left-radius: 50%;
      border-top-right-radius: 50%;
      transform: rotate(-45deg);
      left: 26px;
      top: 20px;
      position: absolute;
    }
    .nose {
      background-color: #333;
    }
    .nose::before, .nose::after {
      content: '';
      position: absolute;
      background-color: inherit;
    }
    .nose ,.nose::before, .nose::after {
      width: 28px;
      height: 18px;
      border-radius: 42px 42px 60px 61px / 30px 30px 50px 46px;
    }
    .nose {
      position: absolute;
      left: 284px;
      top: 187px;
    }
    .mouse {
      position: absolute;
      left: 265px;
      top: 208px;
      width: 68px;
      height: 25px;
      border-radius: 45%;
      border: #393939 7px solid;
      border-top: none;
      border-left: 0;
      border-right: 0;
    }
    .foot-left,.foot-right {
      background: #333;
      position: absolute;
      width: 83px;
      height: 80px;
      border-radius:  0 0 30px 30px;
      z-index: -1;
    }
    .foot-left {
      left: 187px;
      top: 423px;
    }
    .foot-right {
      left: 328px;
      top: 423px;
    }
    .foot-left::after,.foot-right::after {
      content: '';
      width: 43px;
      height: 30px;
      position: absolute;
      background: #363636;
      border-radius:   30px;
    }
    .foot-left::after {
      bottom: 0;
      right: -3px;
    }
    .foot-right::after {
      bottom: 0;
      left: -3px;
    }
  </style>
</body>
</html>