SOURCE

<view class="bee">
  <view class="l-eye">
  </view>
    <view class="body">
    </view>
    <view class="body2">
    </view>
  <view class="l-eye">
  </view>
  <view class="l-ear1">
  </view>
  <view class="l-ear2">
  </view>
    <view class="body3">
    </view>
    <view class="body4">
    </view>
    <view class="tail">
    </view>
    <view class="tail1">
    </view>
  <view class="wingl">
  </view>
  <view class="wingr">
  </view>
</view>

:root {
  --leftMargin: 100px;
  --baseWidth: 400px;
  --baseHeight: 800px;
  --backgroundC:#fff;
  --contentC:#ffc000;
}

.bee {
  width: var(--baseWidth);
  height: var(--baseHeight);
  left: var(--leftMargin);
  top: 50px;
  position: fixed;
  background-color: #fff;
}

.bee .l-eye {
  animation:fadein  2s 3s ;
  position: absolute;
  border-radius: 100%;
  width: 10px;
  height: 10px;
  left: 178px;
  top: 44px;
  background-color: #081b5a;
  box-shadow: 30px 0em 0 0 #081b5a;
}
.bee .l-ear1 {
  animation:fadein  2s 5s ;
  position: absolute;
  width: 8px;
  height: 20px;
  background: #000;
  left: 170px;
  top: 13px;
  border-radius: 8px ;
  transform: rotate(-30deg);
}

.bee .l-ear2{
  animation:fadein  2s 5s ;
  position: absolute;
  width: 8px;
  height: 20px;
  background: #000;
  left: 218px;
  top: 14px;
  border-radius: 8px ;
  transform: rotate(30deg);
  
}

.bee .wingl {
  animation:winglanim 2s 4s; 
  animation-fill-mode:forwards;
  position: absolute;
  width: 20px;
  height: 60px;
  background: #000;
  left: calc(var(--baseWidth)/2 - 43px);
  top: 65px;
  left:110px;
  border-radius:40px;
    border-right: 10px solid var(--contentC);
    border-top: 10px solid var(--contentC);
    border-left: 10px solid var(--contentC);
    border-bottom: 10px solid var(--contentC);
}
.bee .wingr {
  position: absolute;
  width: 18px;
  height: 60px;
  background: #000;
  left: calc(var(--baseWidth)/2 - 43px);
  top: 65px;
  left:250px;
  border-radius:40px;
  transform: rotate(-30deg);
    border-right: 11px solid #ffde00;
    border-top: 11px solid #ffde00;
    border-left: 11px solid #ffde00;
    border-bottom: 11px solid #ffde00;
}

.bee  .body {
  animation:headanim 3s ; 
  position: absolute;
  width: 80px;
  height: 45px;
  background: #ffc000;
  left: calc(var(--baseWidth)/2 - 43px);
  top: 25px;
  border-radius:  40px 40px  0 0;
}
.bee  .body2 {
  position: absolute;
  width: 80px;
  height: 80px;
  background: var(--contentC);
  left: calc(var(--baseWidth)/2 - 43px);
  top: 80px;
  border-radius:  0 0 40px 40px;
}

.bee  .body3 {
  position: absolute;
  width: 80px;
  height: 10px;
  background: #000;
  left: calc(var(--baseWidth)/2 - 43px);
  top: 90px;
}
.bee  .body4 {
  position: absolute;
  width: 80px;
  height: 10px;
  background: #000;
  left: calc(var(--baseWidth)/2 - 43px);
  top: 110px;
}

.bee  .tail {
  left: 177px;
  top: 135px;
  position: absolute;
  width:40px;
  height:40px; 
  background-color:var(--backgroundC);
  border-radius: 100%; /* 左上、右上、右下、左下 */
}
.bee  .tail1 {
  animation:bounce 1s; 
  position: absolute;
  width:25px;
  height:25px; 
  top:142px;
  left:184px;
  background-color:#000;
  border-radius: 100%; /* 左上、右上、右下、左下 */
}
/* 弹跳 */
@-webkit-keyframes bounce{
    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-30px);}
    60%{-webkit-transform:translateY(-15px);}
}
@keyframes headanim{
    0%{transform:translateY(20px);}
    100%{transform:translateY(0);}
}
@keyframes winglanim{
    0%{transform:scale(1,0);}
    100%{transform:scale(1,1);}
}
/* 淡入-从左 */
@keyframes fadeinL{
    0%{opacity:0;-webkit-transform:translateX(-100px);}
    100%{opacity:1;-webkit-transform:translateX(0);}
}
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes eat {
  0% {
  }
  30%{
    transform: translateX(100px);
  }
  50%{
    
    transform: rotate(30deg); 
    transform-origin:0px 100px;
  }
  100% {
  }
}