Untitled

<html><title>css-bee</title>
<style>
.box {
  width: 420px;
  height: 500px;
  margin: 100px;
  border: 1px solid #b9e3db;
}
.box * {
  display: block;
  position: relative;
}
.bee {
  width: 377px;
  animation-name: fly;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: fly;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: fly;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-name: fly;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;
o}
.bee .body {
  position: absolute;
  border-radius: 125.5px;
  margin: 65px 85px;
  width: 250px;
  height: 317px;
  top: 0;
  background: #3a210b
    linear-gradient( to bottom,
      #3a210b 125px, #ffde1b 125px,
      #ffde1b 157px, #3a210b 157px,
      #3a210b 188px, #ffde1b 188px,
      #ffde1b 220px, #3a210b 220px,
      #3a210b 251px, #ffde1b 251px);
}
.bee .body:after {
  content: "";
  position: absolute;
  left: 110px;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  top: 99.8%;
  border-top: 30px solid #3a210b;
}
.bee .wings {
  margin: 188px 20px;
  border-radius: 64px;
  width: 377px;
  height: 128px;
  background: #b9e3db;
  float: left;
  animation-name: flap;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: flap;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: flap;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;
  -o-animation-name: flap;
  -o-animation-duration: 0.5s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;
}
.bee .eyes * {
  position: relative;
  top: 40px;
  background: #3a210b;
  width: 25px;
  height: 25px;
  border-radius: 25px;
  border: 13px solid #fff;
}
.bee .eyes .eye_left {
  float: left;
  left: 55px;
}
.bee .eyes .eye_right {
  float: right;
  right: 55px;
}
@-moz-keyframes flap {
  from {transform: translateY(20px);}
  to {transform: translateY(-20px);}
}
@-webkit-keyframes flap {
  from {-webkit-transform: translateY(20px);}
  to {-webkit-transform: translateY(-20px);}
}
@-o-keyframes flap {
  from {-o-transform: translateY(20px);}
  to {-o-transform: translateY(-20px);}
}
@keyframes flap {
  from {transform: translateY(20px);}
  to {transform: translateY(-20px);}
}
@-moz-keyframes fly {
  from {-moz-transform: translateX(100px);}
  to {-moz-transform: translateX(-100px);}
}
@-webkit-keyframes fly {
  from {-webkit-transform: translateX(100px);}
  to {-webkit-transform: translateX(-100px);}
}
@-o-keyframes fly {
  from {-o-transform: translateX(100px);}
  to {-o-transform: translateX(-100px);}
}
@keyframes fly {
  from {transform: translateX(100px);}
  to {transform: translateX(-100px);}
}

</style>
<body>
  <div class="box">
    <div class="bee">
      <div class="wings"></div>
      <div class="body">
        <div class="eyes">
          <div class="eye_left"></div>
          <div class="eye_right"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>