Featured Post

Data Science Concepts

0

Create a Glossy Line Animation Using HTML, CSS, CSS3 By #BKTutorial




 Source Code:

1) Index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Animation</title>

</head>

<link href="style.css" rel="stylesheet" type="text/css" />

<body>

   <div class="bktutorial">

     <div class="bkt">

       <div class="bk" style="animation-delay:0s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:0.2s"></div>

     </div>

         <div class="bkt">

       <div class="bk" style="animation-delay:0.4s"></div>

     </div>

     

     <div class="bkt">

       <div class="bk" style="animation-delay:0.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:0.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:1s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:1.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:1.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:1.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:1.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:2.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:2.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:2.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:2.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:3s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:3.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:3.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:3.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:3.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:4.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:4.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:4.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:4.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:5s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:5.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:5.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:5.6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:5.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:6s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:6.2s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:6.4s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:6.8s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:7s"></div>

     </div>

          <div class="bkt">

       <div class="bk" style="animation-delay:7.2s"></div>

     </div>

   </div>

</body>

</html>

2) Style.css

@charset "utf-8";
/* CSS Document */
body
{
  background:#000;
}
.bktutorial
{
  position:absolute;
  top:40%;
  left:50%;
}
.bkt
{
  width:1px;
  height:50px;
  background:#000;
  position:absolute;
  transform-origin:bottom;
}
.bkt:nth-child(1)
{
  transform:rotate(10deg);
}
.bkt:nth-child(2)
{
  transform:rotate(-20deg);
}
.bkt:nth-child(3)
{
  transform:rotate(30deg);
}
.bkt:nth-child(4)
{
  transform:rotate(-40deg);
}
.bkt:nth-child(5)
{
  transform:rotate(50deg);
}
.bkt:nth-child(6)
{
  transform:rotate(-60deg);
}
.bkt:nth-child(7)
{
  transform:rotate(70deg);
}
.bkt:nth-child(8)
{
  transform:rotate(-80deg);
}
.bkt:nth-child(9)
{
  transform:rotate(90deg);
}
.bkt:nth-child(10)
{
  transform:rotate(-100deg);
}
.bkt:nth-child(11)
{
  transform:rotate(110deg);
}
.bkt:nth-child(12)
{
  transform:rotate(-120deg);
}
.bkt:nth-child(13)
{
  transform:rotate(130deg);
}
.bkt:nth-child(14)
{
  transform:rotate(-140deg);
}
.bkt:nth-child(15)
{
  transform:rotate(150deg);
}
.bkt:nth-child(16)
{
  transform:rotate(-160deg);
}
.bkt:nth-child(17)
{
  transform:rotate(170deg);
}
.bkt:nth-child(18)
{
  transform:rotate(-180deg);
}
.bkt:nth-child(19)
{
  transform:rotate(190deg);
}
.bkt:nth-child(20)
{
  transform:rotate(-200deg);
}
.bkt:nth-child(21)
{
  transform:rotate(210deg);
}
.bkt:nth-child(22)
{
  transform:rotate(-220deg);
}
.bkt:nth-child(23)
{
  transform:rotate(230deg);
}
.bkt:nth-child(24)
{
  transform:rotate(-240deg);
}
.bkt:nth-child(25)
{
  transform:rotate(250deg);
}
.bkt:nth-child(26)
{
  transform:rotate(-260deg);
}
.bkt:nth-child(27)
{
  transform:rotate(270deg);
}
.bkt:nth-child(28)
{
  transform:rotate(-280deg);
}
.bkt:nth-child(29)
{
  transform:rotate(290deg);
}
.bkt:nth-child(30)
{
  transform:rotate(-300deg);
}
.bkt:nth-child(31)
{
  transform:rotate(310deg);
}
.bkt:nth-child(32)
{
  transform:rotate(-320deg);
}
.bkt:nth-child(33)
{
  transform:rotate(330deg);
}
.bkt:nth-child(34)
{
  transform:rotate(-340deg);
}
.bkt:nth-child(35)
{
  transform:rotate(350deg);
}
.bkt:nth-child(36)
{
  transform:rotate(-360deg);
}
.bk
{
  height:150px;
  width:5px;
  background:#09F;
  border-radius:50%;
  box-shadow:inset 10px 20px 5px orange;
  transform-origin:bottom;
  top:-170px;
  position:relative;
  animation:bk 10s infinite linear;
}

@keyframes bk{
100%{
  box-shadow:0px 0px 0px #f00;
      transform:scale(2,2);
      top:-90px;
  opacity:0;
   }
}

Output:



Comments

Post a Comment

If you any Query and get more information please comment it. Thanks for visit our blog.