CSS Bird

Bird with css

PUG
.bird
  .hair
  .eyes
    .left-eye
      .inner-eye
    .right-eye
      .inner-eye
  .nose
  .mouth
  .hands
    .right-hand
    .left-hand
  .belly
  .feet
    .right-foot
      i.fas.fa-arrow-up
    .left-foot
      i.fas.fa-arrow-up
SCSS
.bird {
  background: #fdbd2c;
  height: 350px;
  width: 200px;
  border-radius: 100px;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    right: 10px;
    background: #fdbd2c;
    width: 80px;
    height: 20px;
    border-bottom-right-radius: 30px;
  }
  .hair {
    background: #fdbd2c;
  }
  .eyes {
    .right-eye {
      background: #000;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 90px;
      left: 50px;
    }
    .left-eye {
      background: #000;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 90px;
      right: 50px;
    }
    .inner-eye {
      position: absolute;
      top: 6px;
      right: 0;
      width: 10px;
      height: 10px;
      background: #FFF;
      border-radius: 50%;
      animation: drop 4s linear infinite;
    }
  }
  .mouth {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 30px 0 30px;
    border-color: #e7831e transparent transparent transparent;
  }
  .hands {
    .right-hand {
      background: #f2b02a;
      width: 50px;
      height: 80px;
      position: absolute;
      top: 140px;
      left: -30px;
      transform: rotate(10deg);
      border-top-left-radius: 50px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      animation: rotate-right 4s linear infinite;
    }
    .left-hand {
      background: #f2b02a;
      width: 50px;
      height: 80px;
      position: absolute;
      top: 140px;
      right: -30px;
      transform: rotate(-10deg);
      border-top-right-radius: 50px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
      animation: rotate-left 4s linear infinite;
    }
  }
  .belly {
    background: #f4c778;
    width: 120px;
    height: 170px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    border-radius: 70px;
  }
  .feet {
    .right-foot {
      position: absolute;
      bottom: -30px;
      right: 20%;
      color: #e7831e;
      font-size: 40px;
    }
    .left-foot {
      position: absolute;
      bottom: -30px;
      left: 20%;
      color: #e7831e;
      font-size: 40px;
    }
  }
}

@-webkit-keyframes rotate-right {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }    
}

@keyframes rotate-left {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-20deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }    
}

@keyframes drop {
   0% {
         transform: translate(0px,0px); 
    }
    25% {
        -webkit-transform: translate(-4px,4px); 
    }
   50% {
        -webkit-transform: translate(-7px,7px); 
    }
   75% {
        -webkit-transform: translate(-4px,4px); 
    }
    100% {
        -webkit-transform: translate(0px,0px); 
    }  
}

DEMO

View Demo
903 Views
55360cookie-checkCSS Bird

Leave a Reply

Your email address will not be published. Required fields are marked *