11

Hola, estoy intentado lograr un efecto de "Pulso" sobre un circulo, usando solo CSS3 puro. Abajo dejo un ejemplo de lo esperado. Es posible?

Esperado

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Actual

#circle {
	width: 70px;
	height: 70px;
	background: green ;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  position: absolute;
}

#icono{
  width: 42px;
	height: 42px;
  margin-top: 12px;
  margin-left: 14.5px;
  }
  
  
 
  
  
<div id="circle" class="button">
 <img id="icono" src="https://d30y9cdsu7xlg0.cloudfront.net/png/10685-200.png">
</div>

1 respuesta 1

14

Lo puedes conseguir creando pseudo-elemtos :before y :after y aplicándoles la misma animación con un retraso para dar ese efecto. La idea sería que tuvieran un borde que cambie de color y tamaño.

Algo como esto:

.circle {
  width: 70px;
  height: 70px;
  background: green;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
}

.circle::before, .circle::after {
  content:"";
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border: 10px solid gray;
  border-radius:100%;
  animation: latido linear 3s infinite;
}

.circle::after {
  animation-delay: -1.5s;
}

@keyframes latido {
  0% { width:70px; height:70px; border:10px solid gray; }
  100% { width:120px; height:120px; border:10px solid transparent; }
}

.icono {
  width: 42px;
  height: 42px;
  margin-top: 12px;
  margin-left: 14.5px;
}

#button-0 { top: 50px; left: 100px; }
<div class="circle button" id="button-0">
  <img class="icono" src="https://d30y9cdsu7xlg0.cloudfront.net/png/10685-200.png">
</div>

2
  • 3
    Wow.............
    – Einer
    Commented el 19 oct. 2017 a las 12:57
  • Justo lo que necesitaba, muchisimas gracias.
    – nawelittle
    Commented el 19 oct. 2017 a las 13:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.