Ape

<div class="bee">
    <div class="bee__head">
        <div class="bee__eye">
            <div class="bee__eye-pupil"></div>
        </div>
    </div>
    <div class="bee__body">
        <div class="bee__stripes"></div>
        <div class="bee__stripes bee__stripes--center"></div>
        <div class="bee__stripes bee__stripes--right"></div>
    </div>
    <div class="bee__wings bee__wings--top-left"></div>
    <div class="bee__wings bee__wings--bottom-left"></div>
    <div class="bee__wings bee__wings--top bee__wings--top-right"></div>
    <div class="bee__wings bee__wings--bottom bee__wings--bottom-right"></div>
    <div class="bee__wings-cover"></div>
</div>

.bee {
  width: 240px;
  height: 240px;
  position: relative;
  overflow: hidden;
  margin: auto;
  &__body {
    background: yellow;
    width: 80%;
    height: 60%;
    border-radius: 50%;
    top: 30%;
    overflow: hidden;
    position: relative;
    border: solid 1px black;
    z-index: 9;
    box-shadow:
            inset 40px 20px 20px rgba(255,0,0,0.2),
            inset -40px -10px 15px rgba(255, 0, 0, 0.3);
  }
  &__stripes {
    background: black;
    position: absolute;
    top: -10%;
    left: 10%;
    height: 120%;
    width: 15%;
    border-radius: 50%;

    &--center {
      left: 35%;
      width: 30%;
      border-radius: 50%;
    }
    &--right {
      right: 10%;
      left: auto;
    }
  }
  &__wings {
    width: 35%;
    height: 60%;
    background: rgba(255,255,255,0.7);
    border: solid 1px black;
    border-radius: 50%;
    position: absolute;
    top: 0;
    box-shadow: inset 5px 5px 10px rgba(0,0,0,0.3);

    &-cover {
      width: 23%;
      height: 10%;
      border-radius: 50%;
      background: black;
      position: absolute;
      z-index: 99;
      top:50%;
      left: 29%;
    }
    &--top-left {
      left: 17%;
      animation: wings-left-movement-negative 1s linear infinite;
    }
    &--bottom-left {
      left: 27%;
      z-index:99;
      animation: wings-left-movement-positive 1s linear infinite;
    }
    &--top-right {
      left: 20%;
      animation: wings-right-movement-negative 1s linear infinite;
    }
    &--bottom-right {
      left: 24%;
      z-index: 99;
      animation: wings-right-movement-positive 1s linear infinite;
    }
    @keyframes wings-right-movement-positive {
      0% {transform: rotate(5deg)}
      50% {transform: rotate(12deg)}
      100% {transform: rotate(5deg)}
    }
    @keyframes wings-right-movement-negative {
      0% {transform: rotate(-5deg)}
      50% {transform: rotate(-12deg)}
      100% {transform: rotate(-5deg)}
    }
    @keyframes wings-left-movement-positive {
      0% {transform: rotate(15deg)}
      50% {transform: rotate(22deg)}
      100% {transform: rotate(15deg)}
    }
    @keyframes wings-left-movement-negative {
      0% {transform: rotate(-15deg)}
      50% {transform: rotate(-22deg)}
      100% {transform: rotate(-15deg)}
    }
  }
  &__head {
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: black;
    position: absolute;
    bottom: 25%;
    left:70%;
    overflow: hidden;
  }
  &__eye {
    height: 32%;
    width: 30%;
    background: white;
    position: absolute;
    border-radius: 50%;
    right: 15%;
    top: 20%;
    &-pupil {
      height: 50%;
      width: 50%;
      background: black;
      position: absolute;
      border-radius: 50%;
      top: 25%;
      right: 10%;
    }
  }
}