Wie erstellt man eine pulsierende Glow-Ring-Animation in CSS?

Question

Ich mag die Art und Weise, wie diese website ihre Ringe leuchten und pulsieren lassen und möchte wissen, wie sie es gemacht haben.

Ich kann etwas ähnliches machen, aber ich bin nicht sehr gut.

Also das ist alles was ich herausfinden konnte, aber es scheint nicht zu funktionieren.

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

Die in den Kommentaren verknüpften Themen sind hilfreich, aber ich glaube nicht, das ist eine exakte Kopie, weil diese ein etwas komplexer ist aufgrund der Notwendigkeit für mehrere Ringe.

Wir können diesen Effekt erzeugen, indem wir transform: scale() und opacity der Elemente animieren. Hier benötigen wir mehr als 1 Element, da wir auf der verlinkten Website mindestens 3 Ringe zu einem bestimmten Zeitpunkt sehen können (einer, der einblendet, einer, der seinen Höhepunkt erreicht, einen, der ausklingt). Durch Hinzufügen der gleichen Animation zu zwei Pseudo-Elementen, einem inneren Element (span) und durch Verzögern der Animation auf zwei von ihnen können wir den erforderlichen Animationseffekt erzielen.

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>