Efeito de pulso criado com CSS3

Neste tutorial, vamos criar um efeito de pulso utilizando CSS. Será usado a keyframe do CSS3.

Agora vamos passar para parte do HTML e CSS deste artigo. Nós apenas precisamos de cinco div e temos de dar estilo à essas div.

Clique aqui e veja o exemplo

HTML

<div class="marca">
    <div class="circulo">
        <div class="pulso1"></div>
        <div class="pulso2"></div>
        <div class="pulso3"></div>
    </div>
</div>

Os nomes das classe são explicativos: a classe marca é o ponto de marcação e a circulo vai ajustar o círculo central.

CSS

@-webkit-keyframes pulse
  {  
    0% {-webkit-transform: scale(0); opacity: 0;}
    8% {-webkit-transform: scale(0); opacity: 0;}
    15% {-webkit-transform: scale(0.1); opacity: 1;}
    30% {-webkit-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -webkit-transform: scale(1);}
  }

@-moz-keyframes pulse
  {  
    0% {-moz-transform: scale(0); opacity: 0;}
    8% {-moz-transform: scale(0); opacity: 0;}
    15% {-moz-transform: scale(0.1); opacity: 1;}
    30% {-moz-transform: scale(0.5); opacity: 1;}
    100% {opacity: 0; -moz-transform: scale(1);}
  }

  .marca
  {
    display: block;
    position: absolute;
    top: 40%;
    left: 45%;
  }


  .marca .circulo
  {
    width: 96px;
    height: 96px;
    background: #a1bae2;
    border-radius: 100px;
    box-shadow:0 0 5px #a1bae2;
  }

  .marca .pulso1
  {
    margin: 0 auto;
    border-radius: 100px;
    position: absolute;
    right: -26px;
    top: -26px;
    z-index: 10;
    background-color: transparent;
    opacity: 0.1;
    width: 144px;
    height: 144px;
    border: 2px solid #a1bae2;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-radius: 100px;
    /* Giving Animation Function */
    -webkit-animation: pulse 2s linear infinite;
    -moz-animation: pulse 2s linear infinite;
    border-image: initial;
    box-shadow:0 0 5px #a1bae2;
  }

  .marca .pulso2
  {
    margin: 0 auto;
    border-radius: 100px;
    position: absolute;
    right: -41px;
    top: -41px;
    z-index: 10;
    background-color: transparent;
    opacity: 0.1;
    width: 174px;
    height: 174px;
    border: 2px solid #a1bae2;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-radius: 100px;
    /* Giving Animation Function */
    -webkit-animation: pulse 2s linear infinite;
    -moz-animation: pulse 2s linear infinite;
    border-image: initial;
    box-shadow:0 0 5px #a1bae2;
  }

  .marca .pulso3
  {
    margin: 0 auto;
    border-radius: 100px;
    position: absolute;
    right: -58px;
    top: -58px;
    z-index: 10;
    background-color: transparent;
    opacity: 0.1;
    width: 208px;
    height: 208px;
    border: 2px solid #a1bae2;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-radius: 100px;
    /* Giving Animation Function */
    -webkit-animation: pulse 2s linear infinite;
    -moz-animation: pulse 2s linear infinite;
    border-image: initial;
    box-shadow:0 0 5px #a1bae2;
  }

Isto é o que você pode fazer com o efeito de animação keyframe.