Lauflicht um Div?

2 Antworten

Ireeb
04.07.2025, 16:58

Da gibt es keine einfache Lösung für, da das keine Standard-Funktionalität ist, die es allgemein nicht vorgefertigt gibt. Da gibt es keine "Lauflicht: an"-Funktion, daher kann man danach auf Google oder auch mit KIs lange suchen.

Aus dem Stehgreif würden mir folgende Möglichkeiten einfallen, um sowas umzusetzen:

  • HTML-Canvas mit JS-gesteuerter Animation. Auf einer Canvas kann man Pixelweise animieren, damit könnte man so einen Effekt auch programmieren.
  • Mit Verläufen und sich überlappenden Elementen. Damit bekommt man sicherlich einen Lauflicht-Effekt hin, aber eventuell nicht genau den, den du möchtest. Kommt eben auch auf die Anforderungen an.
  • Ein animiertes WebP (modernere, hochwertigere Variante zu GIF). Man könnte Buttons mit beliebigen Effekten in externen Programmen wie AfterEffects o.ä. gestalten, und als animierte Grafik speichern. Nachteil wäre, dass das Seitenverhältnis des Buttons nicht flexibel wäre und je nach länge der Animation könnte diese Lösung hohe Datenmengen und damit längere Ladezeiten bedeuten.

Ansonsten kann man natürlich noch schauen, ob es doch irgendwo eine fertige Version davon gibt, z.B. als npm-Package (setzt natürlich voraus, dass das Projekt mit npm o.ä. aufgesetzt ist). Da kann es dann aber auch wieder sein, dass es eben nicht ganz genau so aussieht, wie du es willst, oder andere Nachteile hat.
Woher ich das weiß:Berufserfahrung – Tätigkeit als Webentwickler in einer Digitalagentur
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
05.07.2025, 04:48

Für so einen Effekt kannst du mit CSS einen Farbverlauf als Hintergrund der Box definieren und diesen dann animieren.

Also angenommen, du hast dieses HTML-Element:

<div class="box"></div>

Das CSS dazu könnte folgendermaßen aussehen:

.box {
  animation: 4s running-light linear infinite;
  background:
    linear-gradient(black, black) padding-box,
    linear-gradient(var(--angle), black, #47e4ef) border-box;
  border: 2px solid transparent;
  height: 100px;
  width: 100px;
}

Dem background-Property werden hierbei zwei Hintergrundfarben zugewiesen: Einmal eine Farbe für die Box selbst (exklusive der Rahmenkante) und einmal nur für den Rahmenbereich. Letzterer ist der relevante Farbverlauf für dein Lauflicht. Damit er auch sichtbar wird, musst du explizit einen transparenten Rahmen definieren (ohne Rahmenbreite gibt es keinen Rahmen; ohne Transparenz kann der Farbverlauf nicht durchscheinen).

Für die Bewegung des Lauflichts kann man nun via Animation einfach den Richtungswinkel des Farbverlaufs hochzählen, sodass ein Rotationseffekt entsteht.

@keyframes running-light {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Die Animation läuft endlos, also beginnt nach einem Zyklus der Winkel wieder bei 0.