little bee anim, inspired by gigantic

index.html

<div id="scene">
  <div id="contents">
    
     <div div "bee_legs">
      <div id="front_leg" class ="legs"></div>
      <div id="back_leg" class = "legs"></div>
    </div> <!-- END OF LEGS -->
    
     <div id="the_wings">
      <div id="wing_one" class="wings"></div>
      <div id="wing_two" class="wings"></div>
       <div id="wing_highlight" >
         <div id="highlight_curve"></div>
       </div>
   </div> <!-- END OF WINGS -->
    <div id="tail"></div>
    
    
  <div id="bee_body">
    <div id="body_shine"></div>
    <div id="eye"></div>
    <div id= "the_stripes">
      
      <div id="stripe_one" class="stripes">
          <div class="stripe_shines"></div>
      </div>
      <div id="stripe_two" class="stripes">
         <div class="stripe_shines"></div>
      </div>
      <div id="stripe_three">
        <div class="stripe_shines"></div>
      </div>
    </div> <!-- END OF STRIPES -->
    <div id="body_highlight"></div>
    
  </div> <!-- END OF BEE BODY -->
    
   </div> <!-- END OF CONTENTS -->
  
  <div id="shadow"></div>
  <a href="https://dribbble.com/gigantic_click">INSPIRED BY: GIGANTIC </a>
</div> <!-- END OF SCENE -->

little-bee-anim-inspired-by-gigantic.markdown

little bee anim, inspired by gigantic

A Pen by Kassandra escoe on CodePen.

License.

script.js

/*

AFTER A 3 OR SO YEAR HIATUS FROM CODING IV DECIDED TO GET BACK INTO IT! 
ALOT HAS CHANGED BUT MAN IV MISSED IT.

*/

style.css

body{
  background-color: #9b216c;
}
a{
  color:#6e094d;
  position:absolute;
  margin-top:50px;
  margin-left:22px;
  text-align:center;
}
#scene{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.wings{
  background-color: #f498bf;
  height:90px;
  width:90px;
  position:absolute;
  margin-top: -90px;
}
#wing_highlight{
  background-color: #f9cee1;
  position:absolute;
  height:50px;
  width:50px;
  border-radius:90px;
  margin-top:-75px;
  margin-left:30px;
}
#highlight_curve{
  background-color:  #f498bf;
  position:absolute;
  height:45px;
  width:40px;
  border-radius:90px;
  margin-left:10px;
  margin-top:10px;
  
}
#wing_one{
  border-radius: 50px 50px 1px 50px;
  margin-left:17px;
}
#wing_two{
  border-radius: 50px 50px 50px 1px;
  margin-left: 100px;
}
#eye{
  background-color:black;
  height: 15px;
  width:15px;
  position:absolute;
  margin-left:30px;
  margin-top: 50px;
  border-radius: 100px;  
}
.stripes{
  background-color: black;
  height: 130px;
  width:35px;
  position:absolute;
}
#stripe_one{
  margin-left:70px;
  border-top: 95px solid #0e3441;
}
#stripe_two{
  margin-left:125px;
   border-top: 95px solid #0e3441;
}
#stripe_three{
  border-top: 90px solid #0e3441;
  margin-left:180px;
  height: 140px;
  width: 40px;
  margin-top: 5px;
  background-color: black;
  position:absolute;
  
}
#body_highlight{
  height:30px;
  width: 130px;
  background-color: #86999f;
  position:absolute;
  margin-left: 60px;
  margin-top:20px;
  border-radius: 90px;
  mix-blend-mode: lighten;
}
#body_shine{
  position:absolute;
  height:130px;
  width: 250px;
  border-radius: 90px;
  margin-left:1px;
  margin-top:-36px;
  background-color:#fec93f;
  mix-blend-mode: burn;
}

#bee_body{
  background-color: #f89d28;
  height:130px;
  width: 220px;
  border-radius: 90px;
  position:relative;
  overflow:hidden; 
}
#shadow{
  height:25px;
  width:120px;
  background-color: #6e094d;
  margin-left:50px;
  margin-top: 75px;
  border-radius:90px;
  position:absolute;
}
#tail{
  height:10px;
  width:50px;
  border-radius: 40px;
  background-color: black;
  position:absolute;
  margin-left:200px;
  margin-top:55px;
}
.legs{
  border-radius:90px;
  margin-top:120px;
  height:45px;
  width:20px;
  background-color:black;
  position:absolute;
}
#front_leg{
  margin-left:30px;
  margin-left:85px;
}
#back_leg{
  margin-left:140px;
}

#contents {
  position:relative;
  -webkit-animation: fly .7s infinite alternate;
          animation: fly .7s infinite alternate;
}
@-webkit-keyframes fly {
  0% { top: -5px;  }
  100% { top: 4px; }
}
@keyframes fly {
  0% { top: -5px;  }
  100% { top: 4px; }
}
#the_wings{
  -webkit-animation: flap .1s infinite alternate;
          animation: flap .1s infinite alternate;
}
@-webkit-keyframes flap {
  0% { -webkit-transform: rotatex(10deg); transform: rotatex(10deg); }
  100% {-webkit-transform: rotatex(80deg);transform: rotatex(80deg);}
}
@keyframes flap {
  0% { -webkit-transform: rotatex(10deg); transform: rotatex(10deg); }
  100% {-webkit-transform: rotatex(80deg);transform: rotatex(80deg);}
}
.legs{
  -webkit-animation: leg_swing .7s infinite alternate;
          animation: leg_swing .7s infinite alternate;
}
@-webkit-keyframes leg_swing {
  0% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  100% {-webkit-transform: skew(1deg);transform: skew(1deg);}
}
@keyframes leg_swing {
  0% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  100% {-webkit-transform: skew(1deg);transform: skew(1deg);}
}