CSS冰墩墩又一版

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

.container {
    position: relative;
    --container-size: 0.05em;
    font-size: var(--container-size);
    /* border: 10px solid #f00; */
    width: 600em;
    height: 520em;
}

.m_body {
    width: 362em;
    height: 410em;
    border: #393939 8em solid;
    margin: 50em auto;
    border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
    position: absolute;
    left: 109em;
    top: -30em;
    background: #fff;
}

.ear1,
.ear2 {
    background: #393939;
    width: 81em;
    height: 115em;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}

.ear1 {
    left: 150em;
    top: 26em;
    transform: rotate(-10deg);
}

.ear2 {
    left: 362em;
    top: 28em;
    transform: rotate(10deg);
}

.eye1,
.eye2 {
    background: #393939;
    width: 83em;
    height: 115em;
    border-radius: 50%;
    position: absolute;
}

.eye1 {
    left: 185em;
    top: 122em;
    transform: rotate(45deg);
}

.eye2 {
    left: 329em;
    top: 122em;
    transform: rotate(-45deg);
}

.eye1:before,
.eye2:before {
    content: "";
    width: 40em;
    height: 40em;
    border: #fff 5em solid;
    border-radius: 100%;
    position: absolute;
}

.eye1:before {
    right: 10em;
    top: 22em;
}

.eye2:before {
    left: 10em;
    top: 22em;
}

.eye1:after,
.eye2:after {
    content: "";
    width: 10em;
    height: 10em;
    background: #9b9b9b;
    border-radius: 100%;
    position: absolute;
}

.eye1:after {
    right: 27em;
    top: 31em;
}

.eye2:after {
    left: 41em;
    top: 44em;
}

.face {
    position: absolute;
    border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
}

.c_blue {
    border: #6bcdf3 5em solid;
    width: 280em;
    height: 224em;
    left: 150em;
    top: 78em;
}

.c_red {
    border: #af2350 5em solid;
    width: 287em;
    height: 233em;
    left: 146em;
    top: 73em;
}

.c_purple {
    border: #5d75b3 5em solid;
    width: 295em;
    height: 240em;
    left: 142em;
    top: 70em;
}

.c_yellow {
    border: #ffc346 5em solid;
    width: 305em;
    height: 248em;
    left: 137em;
    top: 65em;
}

.c_green {
    border: #7fcb58 5em solid;
    width: 313em;
    height: 256em;
    left: 133em;
    top: 61em;
}

.arm1,
.arm2 {
    background: #333;
    position: absolute;
    z-index: -1;
}

.arm1 {
    width: 75em;
    height: 118em;
    left: 64em;
    top: 244em;
    transform: rotate(45deg);
    border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
}

.arm2 {
    width: 75em;
    height: 148em;
    left: 463em;
    top: 162em;
    transform: rotate(37deg);
    border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
}

.arm2:before {
    content: "";
    width: 16em;
    height: 24em;
    background: #bc242c;
    position: absolute;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform: rotate(45deg);
    left: 32em;
    top: 20em;
}

.arm2:after {
    content: "";
    width: 16em;
    height: 24em;
    background: #bc242c;
    position: absolute;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform: rotate(-45deg);
    left: 26em;
    top: 20em;
}

.arm_c {
    content: "";
    width: 16em;
    height: 24em;
    position: absolute;
    left: 426em;
    top: 20em;
}

.nose {
    background-color: #333333;
}

.nose:before,
.nose:after {
    content: '';
    position: absolute;
    background-color: inherit;
}

.nose,
.nose:before,
.nose:after {
    width: 28em;
    height: 18em;
    border-radius: 42em 42em 60em 61em/ 30em 30em 50em 46em;
}

.nose {
    position: absolute;
    left: 284em;
    top: 187em;
}

.mouse {
    position: absolute;
    left: 265em;
    top: 205em;
    width: 68em;
    height: 25em;
    border-radius: 48%;
    border: #393939 7em solid;
    border-top: none;
    border-left: 0;
    border-right: 0;
}

.leg1,
.leg2 {
    background: #333;
    position: absolute;
    width: 83em;
    height: 80em;
    border-radius: 0 0 30em 30em;
    z-index: -1;
}

.leg1 {
    left: 187em;
    top: 423em;
}

.leg2 {
    left: 328em;
    top: 423em;
}

.leg1:after,
.leg2:after {
    content: "";
    width: 43em;
    height: 30em;
    position: absolute;
    background: #363636;
    border-radius: 30em;
}

.leg1:after {
    bottom: 0;
    right: -3em;
}

.leg2:after {
    bottom: 0;
    left: -3em;
}
        

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