Pulso Circular

Eu fiz uma demonstração no dabblet disso.

Aqui está o código:

HTML

<div class="pulse"></div>

CSS

/**
* Circular Pulse

*/


body
{
background
: url("http://dabblet.com/img/noise.png") repeat #eee;
min
-height: 100%;
}

.pulse {
margin
: 100px;
width
: 30px;
height
: 30px;
border
-radius: 100px;
box
-shadow: 0 0 0 2px #000;
animation
-direction: alternate;
animation
: thePulse infinite 2s ease-in-out;
}

@-keyframes thePulse {
0% { box-shadow: 0 0 0 2px #000; }
100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }
}

@-moz-keyframes thePulse {
0% { box-shadow: 0 0 0 2px #000; }
100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }

}

@-webkit-keyframes thePulse {
0% { box-shadow: 0 0 0 2px #000; }
100% { box-shadow: 0 0 0 2px #000, 0 0 0 5px #fff, 0 0 0 8px rgba(255, 4, 80, 0.25), 0 0 0 12px #fff, 0 0 0 15px rgba(255, 4, 80, 0.35); }

}