"Pulse" effect in CSS3

Question

"Pulse" effect in CSS3

Navigation

#1 by (12 votes)

10

Hi, I am trying to achieve a "Pulse" effect on a circle, using only pure CSS3. Below I leave an example of what was expected. Is it possible?

Expected

Current

#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>

css3 css css-transform

asked by nawelittle 19.10.2017 в 14:39

source

1 answer

How to verify if two data intervals have shared elements? How to know what if condition is being fulfilled in PHP

score 12 · Accepted Answer

You can get it by creating pseudo-elements :before and :after and applying them the same animation with a delay to give that effect. The idea would be to have a border that changes color and size.

Something like this:

.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>