如何用css实现一个冰墩墩？

1.实现效果

2.实现步骤

1.先画出一个大圆，并设置相应的border-radius。
2.画出两个椭圆样式的耳朵，基于大圆absolute定位，z-index：-1，基于大圆底部。
3.用box-shadow制作出彩色的脸框。
4.基于彩色的脸框，absolute定位两个椭圆式的眼框，眼睛用两个伪元素实现（两个圆）。
5.利用伪元素等实现鼻子和嘴巴。
6.腿和手两两对应，定位在大圆相应的位置。

3.实现代码

<div class="bdd">
    <h2 class="title">苏苏加油</h2>
    <div class="circle-body">
        <div class="ear-left"></div>
        <div class="ear-right"></div>
        <div class="circle-face">
            <div class="eye eye-left"></div>
            <div class="eye eye-right"></div>
            <div class="nose"></div>
            <div class="mouth"></div>
        </div>
        <div class="footer footer-left"></div>
        <div class="footer footer-right"></div>
        <div class="arm arm-left"></div>
        <div class="arm arm-right"></div>
    </div>
    </div>

<style>
    body {
        padding: 0;
        margin: 0;
        background: #fff;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .bdd {
        width: 450px;
        height: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .circle-body {
        width: 230px;
        height: 250px;
        border: 5px solid #393939;
        background: #fff;
        border-radius: 110px 120px 100px 100px/50%;
        position: relative;
    }
    
    .ear-left {
        position: absolute;
        width: 60px;
        height: 70px;
        background: #393939;
        top: -5px;
        left: 10px;
        z-index: -1;
        border-radius: 110px 110px /130px 130px;
    }
    
    .ear-right {
        position: absolute;
        width: 60px;
        height: 70px;
        background: #393939;
        top: -3px;
        right: 10px;
        z-index: -1;
        border-radius: 110px 110px /130px 130px;
    }
    
    .circle-face {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        width: 183px;
        height: 142px;
        border-radius: 116px 129px 98px 109px/128px 114px 78px 73px;
        background-color: #fff;
        box-shadow: rgb(102 201 253) 0 0 0 4px, rgb(173 35 96) 0 0 0 6px, rgb(81 122 183) 0 0 0 8px, rgb(250 198 70) 0 0 0 10px, rgb(128 201 111) 0 0 0 13px;
        z-index: 2;
    }
    
    .eye {
        position: absolute;
        top: 28px;
        width: 50px;
        height: 70px;
        background-color: rgb(57, 56, 63);
        border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;
        z-index: 4;
    }
    
    .eye::before {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        width: 27px;
        height: 27px;
        border-radius: 50%;
        border: 3px solid #fff;
        background-color: rgb(60, 60, 57);
        z-index: 9;
        box-sizing: border-box;
    }
    
    .eye::after {
        content: "";
        position: absolute;
        top: 22px;
        left: 28px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #fff;
        z-index: 11;
    }
    
    .eye-right::before {
        top: 15px;
        left: 10px;
    }
    
    .eye-right::after {
        top: 23px;
        left: 18px;
    }
    
    .eye-left {
        left: 20px;
        transform: rotate(45deg);
    }
    
    .eye-right {
        right: 20px;
        transform: rotate(-45deg);
    }
    
    .nose {
        position: absolute;
        top: 66px;
        left: 50%;
        width: 27px;
        height: 15px;
        transform: translateX(-50%) rotate(180deg);
        z-index: 11;
        overflow: hidden;
    }
    
    .nose::after {
        width: 20px;
        height: 20px;
        background-color: #393939;
        border-radius: 6px 9px 9px 16px / 6px 8px 6px 6px;
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        transform-origin: top left;
        transform: rotate(45deg) translate3d(50%, -50%, 0);
        box-sizing: border-box;
    }
    
    .mouth {
        position: absolute;
        top: 85px;
        left: 50%;
        transform: translateX(-50%);
        width: 55px;
        height: 39px;
        background-color: #393939;
        border-radius: 50% 48% 61% 66% / 67% 63% 67% 62%;
        z-index: 9;
    }
    
    .mouth::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 29px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        z-index: 1;
    }
    
    .mouth::after {
        content: "";
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 37px;
        height: 18px;
        background-color: rgb(163, 51, 51);
        border-radius: 74% 66% 80% 80% / 78% 66% 80% 60%;
    }
    
    .footer {
        position: absolute;
    
        bottom: -29px;
        width: 42px;
        height: 42px;
        background-color: #393939;
        border-radius: 0 50px / 0 18px 0 0;
        z-index: 11;
    }
    
    .footer::before {
        content: "";
        position: absolute;
        bottom: -14px;
        left: 0;
        width: 46px;
        height: 20px;
        background-color: #393939;
        border-radius: 0 14px 4px;
    }
    
    .footer-left {
        left: 54px;
    }
    
    .footer-right {
        right: 54px;
        transform: rotateY(180deg);
    }
    
    .arm {
        top: 103px;
        position: absolute;
        width: 38px;
        height: 73px;
        z-index: -1;
        background-color: #393939;
        border-radius: 0 50% 50% /100% 50%;
    
        transform-origin: bottom center;
    }
    
    .arm::after {
        content: "❤";
        position: absolute;
        top: -26px;
        left: -1px;
        width: 38px;
        height: 48px;
        font-size: 20px;
        text-align: center;
        letter-spacing: -2px;
        color: rgb(163, 51, 51);
        background-color: #393939;
        border-radius: 50% 50% 0 0;
        transform: rotate(-2deg);
        transform-origin: center;
        box-sizing: border-box;
        padding-top: 4px;
    }
    
    .arm-left {
        right: 0px;
        transform: rotate(40deg);
    }
    
    .arm-right {
        left: 6px;
        transform: rotate(-40deg);
    }
    
    .title {
        font-size: 25px;
        position: absolute;
        top: 10px;
        right: 10px;
        font-weight: 700;
        color: rgb(163, 51, 51);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-shadow: 0 0 0.15em #aaffff;
        user-select: none;
        white-space: nowrap;
        filter: blur(0.007em);
        animation: shake 2.5s linear forwards;
    }
    </style>

4.更多web端代码，请关注苏苏的码云！