CSS3 realisiert den leuchtenden Randeffekt

<!-- Dieses Element ist nicht sichtbar. Das DOM wird von JavaScript generiert -->
<div Klasse="root" Stil="Anzeige: keine;">
  <div>
    <div Klasse = "Seite links"></div>
    <div Klasse="Seite oben"></div>
    <div Klasse="Seite rechts"></div>
    <div Klasse = "Seite unten"></div>
  </div>
</div>

Körper {
  Rand: 0;
  Breite: 100vw;
  Höhe: 100vh;
  Hintergrund: #010326;
}

.Wurzel {
  --Leuchtbreite: 2px;
  --Animationslänge: 2 s;
  --Verzögerungsfaktor: 2;

  Position: absolut;
  links: 50%;
  oben: 50 %;
  Breite: 300px;
  Höhe: 300px;
  transformieren: verschieben (-50 %, -50 %) drehen (45 Grad);

/* Entfernen Sie die Kommentarzeichen aus der folgenden Zeile, um zu sehen, wie dieses System eingerichtet ist */
/* Rahmen: 1px gestrichelt rot; */
  Überlauf: versteckt;
}

.Seite {
  Position: absolut;
  oben: 0;
  links: 0;
}

.Seite.links,
.Seite.rechts {
  Breite: var(--glow_width);
  Höhe: 0;
  Hintergrund: linearer Farbverlauf (nach unten, transparent, #c03225, transparent);
  Animation: HöheAnim var(--animation_length) linear unendlich,
    Hider-Berechnung (var(--delay_factor) * var(--animation_length))
      var(--animation_length) unendlich;
}

.Seite.oben,
.Seite.unten {
  Breite: 100 %;
  Höhe: var(--glow_width);
  Hintergrund: linearer Farbverlauf (nach links, transparent, #c03225, transparent);
  Animation: widthAnim var(--animation_length) 0s linear unendlich,
    Hider-Berechnung (var(--delay_factor) * var(--animation_length))
      var(--animation_length) unendlich;
}

.Seite.rechts {
  links: auto;
  rechts: 0;
  Höhe: 0;
  Animationsverzögerung: calc(var(--animation_length) / 2);
  Animationsrichtung: normal, rückwärts;
}

.Seite.unten {
  oben: automatisch;
  unten: 0;
  Breite: 0;
  Animationsverzögerung: calc(var(--animation_length) / 2);
  Animationsrichtung: normal, rückwärts;
}

@keyframes HöheAnim {
  0% {
    Höhe: 0px;
  }
  50 % {
    Höhe: 300px;
    transformieren: initial;
  }
  100 % {
    transformieren: übersetzen(0, 300px);
  }
}

@keyframes widthAnim {
  0% {
    Breite: 0px;
  }
  50 % {
    Breite: 300px;
    transformieren: initial;
  }
  100 % {
    transformieren: übersetzen(300px, 0px);
  }
}

@keyframes hider {
  0%,
  50 % {
    Deckkraft: 0;
  }
  51%,
  100 % {
    Deckkraft: 1;
  }
}

let-Vorlage = `<div Klasse="root" style="transform: übersetzen(-50%, -50%) drehen({{ Wert }})">
<div>
    <div Klasse = "Seite links"></div>
    <div Klasse="Seite oben"></div>
    <div Klasse="Seite rechts"></div>
    <div Klasse = "Seite unten"></div>
  </div>
</div>`

let Segmente = 9
für(lass i = -Segmente; i < Segmente; i++){
  document.body.innerHTML += template.replace("{{ value }}", 90/segments * i + "deg")
}

// document.body.innerHTML += template.replace("{{ value }}", 90/Segmente * 0 + "Grad")