Como criar uma animação pulsante de anel luminoso em CSS?
Eu gosto do jeito que issolocal na rede Internet fizeram seus anéis brilharem e pulsarem e gostariam de saber como eles fizeram isso.
Eu posso fazer algo parecido, mas não sou muito bom.
Então, isso foi tudo o que consegui descobrir, mas não parece funcionar.
CSS:
glowycircleouter.blue .glow4 {
box-shadow: 0 0 25px #287ec6;
}
.glowycircleouter .glow4 {
-webkit-animation: glowyglow 3s 2250ms infinite;
-moz-animation: glowyglow 3s 2250ms infinite;
-ms-animation: glowyglow 3s 2250ms infinite;
-o-animation: glowyglow 3s 2250ms infinite;
animation: glowyglow 3s 2250ms infinite;
animation-name: glowyglow;
animation-duration: 3s;
animation-timing-function: initial;
animation-delay: 2250ms;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;
}
.glowycircleouter .glow4 {
opacity: 0;
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 200%;
height: 200%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
HTML:
<span class="glow4"></span>