CSS雪容融

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

.xrr {
    --container-size: 0.05em;
    font-size: var(--container-size);
    float: right;
    width: 600em;
    height: 520em;
    position: relative;
}

.x_head {
    position: absolute;
    width: 366em;
    height: 297em;
    left: 97em;
    top: 63em;
    background: #d62b01;
    border: #b82b00 8em solid;
    border-radius: 166em;
}

.x_head_line1,
.x_head_line2,
.x_head_line3 {
    position: absolute;
    background: #d62b01;
    border: #b82b00 4em solid;
}

.x_head_line1 {
    width: 323em;
    height: 298em;
    border-radius: 50%;
    left: 15em;
    top: -7em;
}

.x_head_line2 {
    width: 177em;
    height: 301em;
    border-radius: 59%;
    left: 90em;
    top: -7em;
}

.x_head_line3 {
    width: 52em;
    height: 301em;
    border-radius: 80%;
    left: 163em;
    top: -3em;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}

.x_head_line4 {
    width: 311em;
    height: 30em;
    left: 21em;
    top: 26em;
    position: absolute;
    border: 6em solid #b82b00;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}

.x_head_line5 {
    width: 284em;
    height: 74em;
    left: 41em;
    top: -3em;
    position: absolute;
    border: #d62b01 30em solid;
    border-radius: 50%;
    border-right: transparent;
    border-left: transparent;
    border-bottom: transparent;
}

.cap1 {
    border: #f9ad47 6em solid;
    width: 32em;
    height: 12em;
    position: absolute;
    top: -8em;
    left: 268em;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    background: #fff;
    z-index: 6;
}

.cap2 {
    border: #f9ad47 6em solid;
    width: 14em;
    height: 10em;
    position: absolute;
    top: 9em;
    left: 249em;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    transform: rotate(-89deg);
    background: #fff;
    z-index: 5;
}

.cap3 {
    border: #f9ad47 6em solid;
    width: 14em;
    height: 10em;
    position: absolute;
    top: 9em;
    left: 303em;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    transform: rotate(89deg);
    background: #fff;
    z-index: 5;
}

.cap4 {
    position: absolute;
    top: 20em;
    left: 264em;
    width: 5em;
    height: 5em;
    border: 6em solid #f9ad47;
    border-color: #f9ad47;
    border-left-color: transparent;
    border-radius: 50%;
    z-index: 4;
    transform: rotate(45deg);
    background: #fff;
}

.cap5 {
    position: absolute;
    top: 20em;
    left: 297em;
    width: 5em;
    height: 5em;
    border: 6em solid #f9ad47;
    border-color: #f9ad47;
    border-left-color: transparent;
    border-radius: 50%;
    z-index: 4;
    transform: rotate(137deg);
    background: #fff;
}

.cap6 {
    border: #f9ad47 6em solid;
    width: 4em;
    height: 1em;
    position: absolute;
    top: 26em;
    left: 276em;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(346deg);
    z-index: 5;
}

.cap7 {
    border: #f9ad47 6em solid;
    width: 4em;
    height: 1em;
    position: absolute;
    top: 26em;
    left: 286em;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(14deg);
    z-index: 5;
}

.cap8 {
    content: "";
    position: absolute;
    background: #fff;
    width: 53em;
    height: 26em;
    border-radius: 30em;
    left: 265em;
    top: 5em;
}

.x_body {
    background: #d62b01;
    border: #ba2b00 8em solid;
    width: 156em;
    height: 116em;
    border-radius: 10% 10% 40% 52% / 10% 21% 44% 47%;
    position: absolute;
    top: 364em;
    left: 207em;
    z-index: 2;
}

.x_body:before {
    content: "";
    width: 90em;
    height: 84em;
    background: url(../logo.png) no-repeat center #fff;
    background-size: 44em;
    position: absolute;
    border-radius: 100%;
    left: 37em;
    top: 23em;
}

.x_arm1,
.x_arm2 {
    background: #d62b01;
    border: #ba2b00 6em solid;
    width: 45em;
    height: 83em;
    position: absolute;
    z-index: 1;
}

.x_arm1 {
    top: 346em;
    left: 160em;
    border-radius: 50% 50% 40% 65% / 30% 30% 52% 72%;
    transform: rotate(-45deg);
}

.x_arm2 {
    top: 364em;
    left: 357em;
    border-radius: 46% 39% 56% 65% / 30% 57% 47% 44%;
    transform: rotate(321deg);
}

.x_leg1,
.x_leg2 {
    background: #d62b01;
    border: #ba2b00 6em solid;
    width: 46em;
    height: 59em;
    position: absolute;
    z-index: 1;
    border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
}

.x_leg1 {
    top: 465em;
    left: 233em;
}

.x_leg2 {
    top: 465em;
    left: 303em;
}

.x_leg1:before,
.x_leg2:before {
    content: "";
    position: absolute;
    left: 11em;
    bottom: 3em;
    width: 57%;
    height: 5em;
    border-radius: 0% 0% 50% 50% / 0% 32% 40% 50%;
    border: #ffc346 6em solid;
    border-top: none;
    border-left: 0;
    border-right: 0;
}

.scarf {
    position: absolute;
    left: 212em;
    top: 360em;
    background: #f8a644;
    width: 163em;
    height: 34em;
    border-radius: 15em 19em 51em 51em/17em 16em 24em 17em;
    z-index: 2
}

.scarf2 {
    position: absolute;
    left: 223em;
    top: 374em;
    background: #f8a644;
    width: 44em;
    height: 77em;
    border-radius: 0 0 12em 5em;
    transform: rotate(18deg);
    z-index: 2;
}

.line1,
.line2,
.line3,
.line4 {
    background: #f8a644;
    position: absolute;
    width: 4em;
    height: 16em;
    border-radius: 0 0 10em 10em;
    border: #d62b01 4em solid;
    border-top: 0;
}

.line1 {
    left: 5em;
    top: 62em;
}

.line2 {
    left: 13em;
    top: 61em;
}

.line3 {
    left: 21em;
    top: 60em;
}

.line4 {
    left: 28em;
    top: 59em;
}

.rouge1,
.rouge2 {
    width: 42em;
    height: 37em;
    position: absolute;
    background: #e95535;
    border-radius: 40em;
}

.rouge1 {
    left: 162em;
    top: 225em;
}

.rouge2 {
    left: 364em;
    top: 230em;
}

.x_eye1,
.x_eye2 {
    width: 21em;
    height: 28em;
    position: absolute;
    background: #3d3d3d;
    border-radius: 89% 100% 90% 90% / 100% 100% 86% 100%;
}

.x_eye1 {
    left: 221em;
    top: 210em;
}

.x_eye2 {
    left: 333em;
    top: 210em;
}

.x_eye1:before,
.x_eye2:before {
    content: "";
    position: absolute;
    left: 5em;
    top: 5em;
    width: 6em;
    height: 8em;
    border-radius: 10em;
    background: #fff;
    transform: rotate(21deg);
}

.x_face {
    width: 282em;
    height: 160em;
    position: absolute;
    left: 146em;
    top: 139em;
    border-radius: 80em 80em 20em 40em;
}

.x_face1,
.x_face2,
.x_face3,
.x_face4,
.x_face5,
.x_face6,
.x_face7,
.x_face8 {
    border: #b92c00 6em solid;
    border-radius: 50%;
    border-right: transparent;
    border-left: transparent;
    border-top: transparent;
    background: #fff;
    position: absolute;
}

.x_face1 {
    width: 78em;
    height: 87em;
    left: 10em;
    top: 50em;
    transform: rotate(58deg);
}

.x_face2 {
    width: 73em;
    height: 55em;
    left: 120em;
    top: -3em;
    transform: rotate(29deg);
    border: #b92c00 6em solid;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}

.x_face3 {
    width: 72em;
    height: 78em;
    left: 204em;
    top: 33em;
    transform: rotate(322deg);
    border-radius: 0 100% 100% 0/50%;
    border: #b92c00 6em solid;
    border-left: none;
}

.x_face4 {
    width: 81em;
    height: 85em;
    left: 64em;
    top: 3em;
    transform: rotate(165deg);
}

.x_face5 {
    width: 73em;
    height: 69em;
    left: 19em;
    top: 33em;
    transform: rotate(137deg);
}

.x_face6 {
    width: 49em;
    height: 67em;
    left: 218em;
    top: 79em;
    transform: rotate(303deg);
}

.x_face7 {
    width: 188em;
    height: 74em;
    left: 51em;
    top: 82em;
}

.x_face8 {
    width: 29em;
    height: 13em;
    left: 182em;
    top: 33em;
    transform: rotate(38deg);
    z-index: 2;
    background: none;
    border: 6em solid #b92c00;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
}

.x_face8:after {
    content: "";
    width: 29em;
    height: 13em;
    right: -6em;
    top: -12em;
    position: absolute;
    border: 6em solid #b92c00;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #d62b01;
    border-top-color: transparent;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
}

.x_face9 {
    width: 170em;
    height: 119em;
    background: #ffffff;
    left: 40em;
    top: 19em;
    border-radius: 100%;
    position: absolute;
}

.x_face9:before {
    content: "";
    background: #ffffff;
    border-radius: 100%;
    right: -14em;
    top: 31em;
    width: 35em;
    height: 37em;
    position: absolute;
    transform: rotate(30deg);
}

.snow1 {
    width: 105em;
    height: 16em;
    transform: rotate(341deg);
    left: 147em;
    top: 57em;
    position: absolute;
    z-index: 3;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    background: #fff;
    border-right: 0;
}

.snow2 {
    position: absolute;
    width: 78em;
    height: 20em;
    left: 243em;
    top: 29em;
    z-index: 2;
    background: #fff;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}

.snow2:after {
    content: "";
    width: 80em;
    height: 16em;
    background: #ffffff;
    position: absolute;
    border-radius: 10em;
    top: 13em;
    left: -1em;
}

.snow3 {
    position: absolute;
    width: 44em;
    height: 13em;
    left: 228em;
    top: 63em;
    z-index: 2;
    background: #fff;
    border: 6em solid #83b9e8;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    border-left: 0;
    border-right: 0;
}

.snow4 {
    position: absolute;
    width: 42em;
    height: 11em;
    left: 268em;
    top: 58em;
    z-index: 3;
    background: none;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    transform: rotate(4deg);
    border-left: 0;
    border-right: 0;
}

.snow5 {
    position: absolute;
    width: 41em;
    height: 15em;
    left: 300em;
    top: 56em;
    z-index: 2;
    background: #fff;
    border: 6em solid #83b9e8;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: none;
    transform: rotate(359deg);
    border-right: 0;
    border-left: 0;
}

.snow6 {
    background: none;
    border: 6em solid #83b9e8;
    position: absolute;
    left: 150em;
    top: 72em;
    width: 62em;
    height: 14em;
    border-radius: 24em;
    transform: rotate(340deg);
    z-index: 2;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.snow7 {
    border: 6em solid #83b9e8;
    position: absolute;
    left: 362em;
    top: 69em;
    width: 58em;
    height: 13em;
    border-radius: 24em;
    transform: rotate(23deg);
    z-index: 3;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.snow8 {
    position: absolute;
    width: 32em;
    height: 6em;
    left: 203em;
    top: 69em;
    z-index: 4;
    background: none;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    border-right: 0;
    transform: rotate(357deg);
}

.snow9 {
    position: absolute;
    width: 40em;
    height: 4em;
    left: 332em;
    top: 65em;
    z-index: 4;
    background: none;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    transform: rotate(16deg);
    border-left: 0;
    border-right: 0;
}

.snow10 {
    width: 97em;
    height: 16em;
    transform: rotate(21deg);
    left: 320em;
    top: 54em;
    position: absolute;
    z-index: 3;
    border: 6em solid #83b9e8;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    background: #fff;
    border-left: 0;
}
        

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