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); }
}