CSS冰墩墩

            
            .bingdundun-container {
  --container-size: 0.5px;
  font-size: var(--container-size);
  display: inline-block;
  position: relative;
  width: 1000em;
  height: 1000em;
  background: #faf5d7;
  overflow: hidden;
  div {
    position: absolute;
    box-sizing: border-box;
    &:before,
    &:after {
        position: absolute;
        content: '';
    }
}
}
.ear {
  &::before, &::after {
    width: 98em;
    height: 125em;
    left: 299em;
    top: 160em;
    background: #000;
    border-radius: 50%;
  }
  &::after {
    left: 596em;
  }
}
.hand-left {
  width: 100em;
  height: 100em;
  left: 168em;
  top: 500em;
  border-radius: 50%;
  background: #000;
  &::before {
    width: 0;
    height: 0;
    left: 7em;
    top: -76em;
    border: 50em solid;
    border-color: transparent #000 #000 transparent;
  }
}
.hand-right {
  width: 89em;
  height: 176em;
  left: 733em;
  top: 340em;
  background: #000;
  transform: rotate(30deg);
  border-bottom-right-radius: 89em;
  border-top-left-radius: 40em;
  border-top-right-radius: 49em;
  &::before {
    width: 16em;
    height: 30em;
    left: 37em;
    top: 25em;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(19deg);
    background: red;
    border-top-left-radius: 8em;
    border-top-right-radius: 8em;
    border-bottom-left-radius: 16em;
  }
  &::after {
    width: 16em;
    height: 30em;
    left: 29em;
    top: 29em;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(-71deg);
    background: red;
    border-top-left-radius: 8em;
    border-top-right-radius: 8em;
    border-bottom-right-radius: 16em;
  }
}
.body {
  width: 488em;
  height: 557em;
  left: 255em;
  top: 158em;
  border: 10em solid #000;
  background: #fff;
  border-top-left-radius: 240em;
  border-top-right-radius: 240em;
  border-bottom-left-radius: 194em 253em;
  border-bottom-right-radius: 194em 253em;
}
.foot-bottom {
  left: 500em;
  top: 677em;
  &::before {
    right: 36em;
    width: 115em;
    height: 116em;
    background: #000;
    border-top-left-radius: 9em 90em;
    border-top-right-radius: 9em 83em;
    border-bottom-left-radius: 35em;
    border-bottom-right-radius: 14em;
  }
  &::after {
    left: 36em;
    width: 115em;
    height: 116em;
    background: #000;
    border-top-right-radius: 9em 90em;
    border-top-left-radius: 9em 83em;
    border-bottom-right-radius: 35em;
    border-bottom-left-radius: 14em;
  }
}
.foot-top {
  left: 500em;
  top: 677em;
  &::before {
    right: 38em;
    width: 100em;
    height: 37em;
    background: #000;
    border-top-right-radius: 100%;
  }
  &::after {
    left: 38em;
    width: 100em;
    height: 37em;
    background: #000;
    border-top-left-radius: 100%;
  }
}
.face {
  width: 400em;
  height: 320em;
  top: 223em;
  left: 299em;
  border-top-left-radius: 50% 60%;
  border-top-right-radius: 50% 60%;
  border-bottom-left-radius: 41% 42%;
  border-bottom-right-radius: 41% 42%;
  box-shadow: 0 0 0 5em #006BB0, 0 0 0 10em #DC2F1F, 0 0 0 15em #1D1815, 0 0 0 20em #EFA90D, 0 0 0 25em #059341;
}
.eye {
  left: 500em;
  top: 287em;
  &::before {
    right: 41em;
    width: 112em;
    height: 151em;
    background: #000;
    transform: rotate(45deg);
    border-radius: 50%;
  }
  &::after {
    left: 41em;
    width: 112em;
    height: 151em;
    background: #000;
    transform: rotate(-45deg);
    border-radius: 50%;
  }
}
.eye-hole {
  left: 500em;
  top: 325em;
  width: 15em;
  height: 15em;
  border-radius: 50%;
  box-shadow: -75em 19em #fff, 81em 19em #fff;
  &::before, &::after {
    width: 52em;
    height: 52em;
    border-radius: 50%;
    border: 7em solid #fff;
  }
  &::before {
    right: 60em;
  }
  &::after {
    left: 45em;
  }
}

.nose {
  width: 44em;
  height: 31em;
  top: 369em;
  left: 476em;
  background: #000;
  border-radius: 10em 10em 21em 21em;
}
.mouth {
  width: 74em;
  height: 48em;
  top: 373em;
  left: 462em;
  border: 5em solid;
  border-color: transparent transparent #000;
  border-radius: 50%;
}

body {
  height: 100vh;
  width: 100%;
  background: #faf5d7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
        

            
            
function initContainerSize() {
    // 取窗口短边与1000之比
    const p = Math.min(window.innerWidth / 1000, window.innerHeight / 1000);
    const el = document.querySelector(".bingdundun-container");
    el.style.setProperty("--container-size", Math.max(p, 0.1) + "px");
}
initContainerSize();
window.addEventListener('resize', initContainerSize);