Pulse Effect With CSS3 Animation - Pulsing effect using CSS3 Transform Scale by BK Tutorial

 

Source Code:

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

<title>Pulse Effect </title>

<style>

body

{

   margin:0;

   padding:0;

   background:#000;

}

.center

{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

}

.pulse

{

  width:150px;

  height:150px;

  background:#6dff4a;

  border-radius:50%;

  color:#FFF;

  font-size:30px;

  text-align:center;

  line-height:150px;

  font-family:Arial;

  text-transform:uppercase;

  animation:animate 3s linear infinite;

}

@keyframes animate{

 0%{

  box-shadow:0 0 0 0 rgba(200,255,200,.7),0 0 0 0 rgba(0,0,200,.7);

   }

 40%{

  box-shadow:0 0 0 50px rgba(255,150,90,0),0 0 0 0 rgba(255,109,74,.7);

}

 80%{

box-shadow:0 0 0 50px rgba(255,109,80,0),0 0 0 30px rgba(255,109,74,0);

}

 100%{

  box-shadow:0 0 0 0 rgba(255,109,74,0),0 0 0 30px rgba(255,109,74,0);

}

  /* 0%{transform:scale(0,0);} 50%{transform:scale(2,2);} 100%{transform:scale(3,3);}  */

}

span

{

  color:#6dff4a;

  font-size:25px; 

  font-family:Century Gothic;

  text-transform:none;

  animation:bkt 5s linear infinite;

}

@keyframes bkt {

0%{color:#ff0;} 50%{color:#00F;}   100%{color:#F00;}  } 

</style>

<div class="center">

 <div class="Pulse">BK  <span>Tutorial</span> 

 </div>

</div>