boom

Tutorials of (Boom) by Maharajan

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>boom</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <label></label>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
label
{
width:104px;
  height:140px;
  background:red;
  display:block;
  border-radius:80% 80% 80% 80%;
  margin:0px auto;
animation:boom 2.5s linear 2.5s 1 ;
}
@keyframes boom
{
  10%
  {
    opacity:0;
    box-shadow:24px 63px 14px -27px red,56px 24px 10px -33px red,52px -26px 23px -25px red,8px -55px 23px -25px red,-33px -33px 23px -25px red,-56px 7px 23px -26px red,-39px 55px 23px -26px red,-3px 59px 23px -26px red;
    transform: rotateZ(0deg);
  }
  30%{
      opacity:0;
       box-shadow:45px 73px 24px -21px red,79px 24px 21px -28px red,68px -35px 30px -16px red,17px -59px 30px -19px red,-46px -43px 32px -17px red,-74px 13px 30px -19px red,-58px 66px 32px -20px red,-10px 77px 34px -19px red;
        transform: rotateZ(-5deg);
  }
  100%{
     opacity:0;
             box-shadow:106px 92px 74px -7px red,178px 28px 53px -19px red,140px -73px 63px -5px red,19px -94px 58px -15px red,-111px -54px 64px -9px red,-132px 26px 66px -12px red,-106px 125px 62px 0px red,2px 124px 33px -15px red
        transform: rotateZ(5deg);
  }
 
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( boom ) is write by maharajan, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © maharajan