Here we come, here comes the CSS version of Bingdundun...

Without further ado, let’s go straight to the topic, the first issue must be your own official account: https://mp.weixin.qq.com/s/_pZUmdU12JtAPIjdHTyi2A

As for the specific refinement of the code, it's just that boring people are doing boring things, so be happy. The code is very long, and there is room for optimization.

<div id="bingdundun">
    <div class="body"></div>
    <div class="earLeft"></div>
    <div class="earRight"></div>
    <div class="face"></div>
    <div class="eyeLeft"></div>
    <div class="eyeLeft eyeRight"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="handLeft"></div>
    <div class="handRight"></div>
    <div class="footerLeft"></div>
    <div class="footerLeft footerRight"></div>
</div>

In the CSS section, many features of border-radius are used.

#bingdundun {
    position: relative;
    width: 400px;
    height: 400px;
}
#bingdundun .body {
    position: absolute;
    top: 76px;
    left: 93px;
    width: 211px;
    height: 237px;
    border-radius: 91px 105px 74px 84px/128px 119px 129px 114px;
    background-color: #fff;
    border: 5px solid #393939;
    box-sizing: border-box;
    z-index: 1;
}
#bingdundun .earLeft {
    position: absolute;
    top: 77px;
    left: 113px;
    width: 43px;
    height: 66px;
    transform: rotate(343deg);
    background-color: #393939;
    border-radius: 91px 52px 74px 84px/128px 68px 129px 114px;
}
#bingdundun .earRight {
    position: absolute;
    top: 76px;
    left: 243px;
    width: 39px;
    height: 50px;
    transform: rotate(190deg);
    background-color: #393939;
    border-radius: 7px 52px 74px 84px/33px 68px 129px 114px;
}
#bingdundun .face {
    position: absolute;
    top: 108px;
    left: 117px;
    width: 164px;
    height: 131px;
    border-radius: 98px 124px 82px 84px/104px 93px 66px 70px;
    background-color: #fff;
    box-shadow: rgb(102, 201, 253) 0 0 0 3px, rgb(173, 35, 96) 0 0 0 5px, rgb(81, 122, 183) 0 0 0 7px, rgb(250, 198, 70) 0 0 0 9px, rgb(128, 201, 111) 0 0 0 12px;
    z-index: 2;
}
#bingdundun .eyeLeft {
    position: absolute;
    top: 132px;
    left: 133px;
    width: 47px;
    height: 65px;
    transform: rotate(45deg);
    background-color: rgb(57, 56, 63);
    border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;
    z-index: 4;
}
#bingdundun .eyeLeft::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 15px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 3px solid #fff;
    background-color: rgb(60, 60, 57);
    z-index: 5;
    box-sizing: border-box;
}
#bingdundun .eyeLeft::after {
    content: "";
    position: absolute;
    top: 18px;
    left: 25px;
    width: 6px;
    height: 6px;
    z-index: 6;
    border-radius: 50%;
    background-color: #fff;
    z-index: 6;
}
#bingdundun .eyeRight {
    left: 218px;
    transform: rotate(-45deg);
}
#bingdundun .eyeRight::before {
    top: 10px;
    left: 9px;
}
#bingdundun .eyeRight::after {
    top: 15px;
    left: 16px;
}
#bingdundun .nose {
    position: absolute;
    top: 175px;
    left: 188px;
  width: 26px;
  height: 14px;
  transform: rotate(180deg);
    z-index: 6;
    overflow: hidden;
}
#bingdundun .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;
}
#bingdundun .mouth {
    position: absolute;
    top: 192px;
    left: 176px;
    width: 50px;
    height: 35px;
    background-color: #393939;
    border-radius: 50% 48% 60% / 48% 45%;
    transform: rotate(1deg);
    z-index: 5;
}
#bingdundun .mouth::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 4px;
    width: 35px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 1;
}
#bingdundun .mouth::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 7px;
    width: 36px;
    height: 13px;
    background-color: rgb(163, 51, 51);
    border-radius: 50% 48% 80% 80% / 68% 45% 80% 60%;
}
#bingdundun .handLeft {
    position: absolute;
    top: 203px;
    left: 83px;
    width: 40px;
    height: 70px;
    background-color: #393939;
    transform: rotate(30deg);
}
#bingdundun .handLeft::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 0;
    width: 41px;
    height: 40px;
    background-color: #393939;
    border-radius: 50%;
}
#bingdundun .handRight {
    position: absolute;
    top: 160px;
    left: 270px;
    width: 40px;
    height: 70px;
    background-color: #393939;
    border-radius: 44px 0 80px / 100px 30px 100px;
    transform: rotate(40deg);
    transform-origin: bottom center;
}
#bingdundun .handRight::after {
    content: "❤";
    position: absolute;
    top: -14px;
    left: 5px;
    width: 35px;
    height: 35px;
    font-size: 20px;
    text-align: center;
    letter-spacing: -2px;
    color: rgb(163, 51, 51);
    background-color: #393939;
    border-radius: 40px 40px 55px / 100px 40px 100px 0;
    transform: rotate(-55deg);
    transform-origin: center;
}
#bingdundun .footerLeft {
    position: absolute;
    top: 300px;
    left: 142px;
    width: 40px;
    height: 40px;
    background-color: #393939;
    border-radius: 0 50px / 0 18px 0 0;
    z-index: 7;
}
#bingdundun .footerLeft::before {
    content: "";
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 42px;
    height: 20px;
    background-color: #393939;
    border-radius: 0 14px 4px;
}
#bingdundun .footerRight {
    left: 220px;
    transform: rotateY(180deg);
}