Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)

Ich habe kürzlich die Tutorial-Reihe zu CSS-Animationseffekten auf YouTube verfolgt, in der viele interessante CSS-Animationseffekte vorgestellt werden. Der erste ist ein sehr cooler Neonlichteffekt. Hier werde ich eine einfache Aufzeichnung machen und die Implementierungsidee teilen.

Dies ist der zu erzielende Effekt:

Sie können sehen, dass ein neonlichtähnlicher Effekt erzeugt wird, wenn die Maus in die Schaltfläche hinein bewegt wird; wenn die Maus aus der Schaltfläche herausbewegt wird, bewegt sich ein Lichtstrahl entlang einer festen Bahn (um die Schaltfläche herum).

Neonlicht-Umsetzung

Die Implementierung von Neonlicht ist relativ einfach und kann mithilfe mehrerer Schatten erfolgen. Wir fügen dem Button drei Schattenebenen hinzu, wobei der Unschärferadius jeder Schattenebene von innen nach außen zunimmt. Wenn mehrere Schatten übereinander gelegt werden, kann ein Effekt ähnlich dem von Neonlicht entstehen. Der Code für diesen Abschnitt lautet wie folgt:

HTML:

 <div Klasse="Licht">
    Neon-Knopf
 </div>

CSS:

Körper {
 Hintergrund: #050901;   
}
.Licht {
  Breite: Inhalt anpassen;
  Polsterung: 25px 30px;
  Farbe: #03e9f4;
  Schriftgröße: 24px;
  Texttransformation: Großbuchstaben;
  Übergang: 0,5 s;
  Buchstabenabstand: 4px;
  Cursor: Zeiger;
}
.Licht:schweben {
  Hintergrundfarbe: #03e9f4;
  Farbe: #050801;
  Kastenschatten: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}

Der endgültige Effekt ist wie folgt:

Implementierung von Moving Beams

Obwohl es so aussieht, als würde sich nur ein Strahl entlang der Kante des Knopfes bewegen, handelt es sich tatsächlich um die Überlagerung von vier Strahlen, die sich in verschiedene Richtungen bewegen. Ihre Bewegungsrichtungen sind: von links nach rechts, von oben nach unten, von rechts nach links und von unten nach oben, wie in der folgenden Abbildung dargestellt:

Bei diesem Vorgang kreuzen sich die Lichtstrahlen. Betrachtet man nur den Rand des Knopfes, sieht es so aus, als ob sich nur ein Lichtstrahl im Uhrzeigersinn bewegt.
Hier sind einige Punkte, die bei der konkreten Umsetzung zu beachten sind:

• Die vier Strahlen entsprechen den vier Unter-Divs von div.light. Ihre Anfangspositionen sind ganz links, ganz oben, ganz rechts und ganz unten auf der Schaltfläche und sie bewegen sich wiederholt in eine feste Richtung.
• Jeder Strahl ist sehr klein in Höhe oder Breite (nur 2px) und hat einen Farbverlauf von transparent zu neon, sodass er wie eine Konvergenz aussieht (keine vollständige Linie).
• Damit wir eine Bewegung im Uhrzeigersinn sehen, müssen die vier Strahlen in der richtigen Reihenfolge bewegt werden. Zuerst beginnt sich der Strahl über dem Knopf zu bewegen, nach einer Weile bewegt sich der Strahl rechts, nach einer Weile bewegt sich der Strahl darunter und nach einer Weile bewegt sich der Strahl links. Es gibt eine Verzögerung bei der Bewegung zwischen den Lichtstrahlen. Nehmen wir beispielsweise den oberen und rechten Lichtstrahl: Wenn sie sich gleichzeitig zu bewegen beginnen, verpassen die beiden Lichtstrahlen die Möglichkeit, sich zu kreuzen, da die Bewegungsdistanz rechts kleiner ist als die Bewegungsdistanz oben. Wir sehen dann unzusammenhängende, inkohärente Lichtstrahlen. Da die Bewegungsdistanz des rechten Strahls kürzer ist, müssen wir, damit der obere Strahl ihn „einholen“ kann, den „Abgang“ des rechten Strahls verzögern. Daher müssen wir ihm eine Animationsverzögerung zuweisen. In ähnlicher Weise benötigen auch die beiden anderen Strahlen eine Animationsverzögerung. Eine Verzögerung von etwa 0,25 Sekunden zwischen mehreren Animationen ist ausreichend.
• Es reicht aus, den Strahl um den Rand der Schaltfläche anzuzeigen. Stellen Sie daher einen versteckten Überlauf für div.light ein.

Der Code lautet wie folgt:

HTML:

<div Klasse="Licht">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    Neon-Knopf
</div>

CSS:

.Licht {
  Position: relativ;
  Polsterung: 25px 30px;
  Farbe: #03e9f4;
  Schriftgröße: 24px;
  Texttransformation: Großbuchstaben;
  Übergang: 0,5 s;
  Buchstabenabstand: 4px;
  Cursor: Zeiger;
  Überlauf: versteckt;
}
.Licht:schweben {
  Hintergrundfarbe: #03e9f4;
  Farbe: #050801;
  Kastenschatten: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 200px #03e9f4;
}
.light div {
  Position: absolut;
}
.light div:nth-child(1){
  Breite: 100 %;
  Höhe: 2px;
  oben: 0;
  links: -100%;
  Hintergrund: linearer Farbverlauf (nach rechts, transparent, #03e9f4);
  Animation: Animate1 1s linear unendlich;
}
.light div:nth-child(2){
  Breite: 2px;
  Höhe: 100%;
  oben: -100%;
  rechts: 0;
  Hintergrund: linearer Farbverlauf (nach unten, transparent, #03e9f4);
  Animation: Animate2 1s linear unendlich;
  Animationsverzögerung: 0,25 s;
}
.light div:nth-child(3){
  Breite: 100 %;
  Höhe: 2px;
  unten: 0;
  rechts: -100%;
  Hintergrund: linearer Farbverlauf (nach links, transparent, #03e9f4);
  Animation: Animate3 1s linear unendlich;
  Animationsverzögerung: 0,5 s;
}
.light div:nth-child(4){
  Breite: 2px;
  Höhe: 100%;
  unten: -100 %;
  links: 0;
  Hintergrund: linearer Farbverlauf (nach oben, transparent, #03e9f4);
  Animation: Animate4 1s linear unendlich;
  Animationsverzögerung: 0,75 s;
}
@keyframes animieren1 {
  0% {
    links: -100%;
  }
  50 %, 100 % {
    links: 100 %;
  }
}
@keyframes animate2 {
  0% {
    oben: -100%;
  }
  50 %, 100 % {
    oben: 100 %;
  }
}
@keyframes animate3 {
  0% {
    rechts: -100%;
  }
  50 %, 100 % {
    rechts: 100%;
  }
}
@keyframes animate4 {
  0% {
    unten: -100 %;
  }
  50 %, 100 % {
    unten: 100 %;
  }
}

Dadurch wird die Wirkung des Bildes am Anfang des Artikels erzielt.

Neonlichter in verschiedenen Farben

Was ist, wenn Sie Neonlichteffekte in anderen Farben wünschen? Muss ich die entsprechenden Farben noch einmal anpassen? Tatsächlich haben wir eine einfachere Methode, nämlich die Verwendung von filter:hue-rotate(20deg), um den Farbton von div.light und allen internen Elementen auf einmal zu ändern.

Die CSS-Funktion hue-rotate() dreht den Farbton eines Elements und seines Inhalts.

Der endgültige Effekt ist wie folgt:

Dies ist das Ende dieses Artikels darüber, wie man coole Neonlichteffekte mit reinem CSS erzielt (mit Demo). Weitere relevante CSS-Neonlichtinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!