Come creare un'animazione a luminescenza pulsante nei CSS?

Question

Mi piace il modo in cui questo website ha reso i loro anelli luminosi e pulsati e vorrebbe sapere come hanno fatto.

Posso creare qualcosa di simile ma non sono molto bravo.

Quindi questo è tutto ciò che sono riuscito a capire ma non sembra funzionare.

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> 

Answer 1

I fili collegati nei commenti sono utili, ma non credo che questo è un esatto duplicato, perché questo è un po 'più complessa a causa della necessità di più anelli.

Possiamo creare questo effetto animando transform: scale() e opacity degli elementi. Qui, abbiamo bisogno di più di 1 elemento perché nel sito web collegato possiamo vedere almeno 3 anelli in un dato punto di tempo (uno che sta svanendo, uno che è al suo apice, uno che sta scomparendo). Aggiungendo la stessa animazione a due pseudo-elementi, un elemento interno (il span) e ritardando l'animazione su due di essi possiamo ottenere l'effetto di animazione richiesto.

div { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    margin: 50px; 
 
    border: 2px solid white; 
 
} 
 
div:before, 
 
div:after, span { 
 
    position: absolute; 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0%; 
 
    left: 0%; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0 15px #287ec6; 
 
    animation: glow-grow 2s ease-out infinite; 
 
} 
 
div:after { 
 
    animation-delay: .66s; 
 
} 
 
span{ 
 
    animation-delay: 1.33s; 
 
    } 
 
@keyframes glow-grow { 
 
    0% { 
 
    opacity: 0; 
 
    transform: scale(1); 
 
    } 
 
    80% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    } 
 
} 
 
body { 
 
    background: black; 
 
}

<div> 
 
    <span></span> 
 
</div>