這是demo的原型連接https://codepen.io/khr2003/pen/BGZdXw
制作思路：
把小熊貓分解

image.png

.container{
  height:50vh;
  width:50vh;
  left:50%;
  top:50%;
  margin-top:-25vh;
  margin-left:-25vh;
  position:absolute;
}

居中顯示

.face
    {
      position: absolute;
      background-color: #f68122;
      width: 70%;
      height: 50%;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      overflow: hidden;
      left: 15%;
      top: 25%;
}

關(guān)鍵 border-radius 畫(huà)一個(gè)不規(guī)則圓

.mouth{
  position: absolute;
  bottom: 5%;
  width: 40%;
  height: 40%;
  background-color: white;
  border-radius: inherit;
  left: 30%;
}

同理嘴部背景也是縮放
lips-top是制作嘴部彎曲的區(qū)域限制
兩個(gè)彎的嘴可以看作是一個(gè)白色的正方體純?cè)诘撞亢陀也康腷order
并且border做了radius，并且做了旋轉(zhuǎn)效果 transform: rotate(6deg);

.lips-top{
  position:absolute;
  top: 50%;
  left: 30%;
  height:28%;
  width: 40%;
 `border-radius: 50% 50%;
  z-index: 2;
}
.lips-top::before{
    content: "";
    position: absolute;
    right: 50%;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius: 0 0 50% 30%;
    transform: rotate(6deg);
    border-right: 4px solid  #3d2115;
    border-bottom: 4px solid #3d2115;
}
.lips-top::after{
    content: "";
    position: absolute;
    left:50%;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius:0 0 30% 50% ;
    transform: rotate(-6deg);
    border-left: 4px solid  #3d2115;
    border-bottom: 4px solid #3d2115;
}

image.png

眉毛是一個(gè)長(zhǎng)方體，左右白色右邊橙色，在白色部分畫(huà)一個(gè)圓向橙色部分偏移50%。橙色部分畫(huà)一個(gè)圓向白色部分偏移50%，旋轉(zhuǎn)橢圓，

.eyebrow{
    position: absolute;
    top: 18%;
    height: 20%;
    width: 16%;
    background: linear-gradient(-90deg, white 50%, #f68122 51%);//線性漸變左邊白色右邊橙色
    z-index: 1;
    border-radius: 50%;
    transform: rotate(15deg);
      }        
.eyebrow::before, .eyebrow::after
        {
          content: "";
          position: absolute;
          left: 50%;
          top: 0;
          transform: translateX(-50%);
          height: 43%;
          width: 40%;
          background-color: white;
          border-radius: 50%;
        }
.eyebrow::after{
          top: 41%;
          left: 59%;
          background-color: #f68122;
          height: 60%;
          width: 60%;
}
.eyebrow.left{
  left: 31%;
  
}
.eyebrow.right{
  right: 31%;
  background: linear-gradient(-90deg, #f68122 50%, white 51%);
}

臉頰部分白色是cheek的白色陰影效果，box-shadow: -25px 3px 0 8px white;
cheek的內(nèi)容是棕色橢圓形，棕色橢圓形上面疊加了傾斜的橙色橢圓形，由于臉頰的z-index小于嘴部，傾斜的橙色橢圓形部分在嘴部下面。

image.png

.cheek{
     position: absolute;
    top: 37%;
    height: 70%;
    width: 20%;
    z-index: 0;
    border-radius: 50%;
    background-color: #3d2115;
    
}
.cheek.left{
  left: 18%;
  box-shadow: -25px 3px 0 8px white;
}
.cheek.right{
  right:18%;
  box-shadow: 25px 3px 0 8px white;
}
.cheek::before{
  content: "";
  background-color: #f68122;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  transform-origin: top center;
  border: 0px solid transparent;
}
.cheek.left::before{
  top: -2%;
  left: -7%;
  transform: rotate(-15deg);
}
.cheek.right::before{
  top: -2%;
  right: -7%;
  transform: rotate(15deg);
}

2耳朵部分
一個(gè)傾斜的長(zhǎng)方體內(nèi)有圓形，圓形border3px白色

image.png

圓形左側(cè)border20%，旋轉(zhuǎn)-45后，skew(20deg, 20deg);2D扭曲

image.png

.ear.left{
    position: absolute;
    height: 25%;
    width: 25%;
    left: 10%;
    top: 25%;
    overflow: hidden;
    transform: translate(-25%, -25%) rotate(-40deg);
    z-index: -1;
  border:1px solid
}
.ear.left::before{
          content: "";
          position: absolute;
          left: 0;
          top: 60%;
          width: 100%;
          height: 100%;
          border: 7px solid white;
          background-color: #3d2115;
          box-sizing: border-box;
          transform: rotate(45deg) skew(20deg, 20deg);
          border-radius: 20% 50% 50% 50%;
}