Erstellen eines Neonlichteffekts mit schwebenden Partikeln mit HTML, CSS und JavaScript

In diesem Tutorial erstellen wir mit reinem HTML, CSS und JavaScript einen faszinierenden Neonlichteffekt mit schwebenden Partikeln. Wir werden jede Komponente aufschlüsseln und erklären, wie sie zusammenwirken, um diesen atemberaubenden visuellen Effekt zu erzeugen.

1. Die Kernstruktur verstehen

Beginnen wir mit der Aufschlüsselung der grundlegenden HTML-Struktur:

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

Diese Variable ist entscheidend, weil:

• Verwendet min(), um eine reaktionsfähige Größenanpassung sicherzustellen
• Kombiniert Ansichtsfensterbreite (vw) und -höhe (vh)
• Erzeugt einen proportionalen Effekt über verschiedene Bildschirmgrößen hinweg

3. Body-Styling-Deep-Dive

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Lassen Sie uns jede Eigenschaft aufschlüsseln:

• margin: 0: Entfernt den Standardabstand
• Überlauf: versteckt: Verhindert Bildlaufleisten und enthält Partikel
• Hintergrund: Schwarz: Erzeugt Kontrast für den Neoneffekt
• Höhe/Breite: 100 VH/VW: Gewährleistet eine vollständige Abdeckung des Sichtfensters
• display: flex: Ermöglicht die zentrierte Positionierung
• justify-content/align-items: center: Perfekte Zentrierung

4. Der Hauptcontainer für Lichteffekte

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

Wichtige Aspekte erklärt:

1. Größenanpassung: Verwendet die CSS-Variable für responsive Abmessungen
2. Positionierung:
   • Position: fest: Sorgt für Stabilität beim Scrollen
   • Oben/Links: 50 %: Positionen in der Mitte des Ansichtsfensters
   • transform: Translate(-50%, -50%): Perfekte Zentrierung
3. Unschärfeeffekt:
   • Dynamische Unschärfe basierend auf der Größe
   • Erzeugt einen weichen, realistischen Glanz
4. Animation:
   • 8 Sekunden Dauer für einen gleichmäßigen Effekt
   • Einfaches Ein-Aus-Timing für natürliche Bewegung

5. Details der inneren Lichtschicht

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

Gradientenanalyse:

1. Mitte (0 %):
   • Violettton mit 20 % Deckkraft
   • Erzeugt Kernhelligkeit
2. Mittelschicht (30 %):
   • Dunkleres Lila bei 15 % Deckkraft
   • Fügt Tiefe hinzu
3. Äußere Schicht (50 %):
   • Blauton bei 10 % Deckkraft
   • Erstellt einen Übergang
4. Rand (70 %):
   • Verschwindet zu transparent
   • Sanfte Kantenüberblendung

6. Details der äußeren Lichtschicht

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

Aufschlüsselung der Spezialeffekte:

1. Verlaufsstruktur:
   • Weißes Zentrum für Intensität
   • Lila Mitte für Farbe
   • Blaue Außenseite für Tiefe
2. Animation:
   • 10-Sekunden-Rotation
   • Lineares Timing für reibungslose Bewegungen
3. Mischen:
   • Bildschirmmodus für Leuchteffekt
   • Verbessert den Glanz und die Farbmischung

7. Animations-Keyframes erklärt

    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div>



<p>Here's what each element does:</p>

<ul>
<li>
light-effect: Main container for our neon effect</li>
<li>
light-inner: Creates the core glow effect</li>
<li>
light-outer: Adds an additional layer of luminosity and rotation</li>
</ul>

<h2>
  
  
  2. CSS Variables and Root Setup
</h2>

<p>First, let's understand our CSS variables:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
    --blur-size: min(40vw, 40vh);
}

Animationsdetails:

1. pulseNeon:
   • Behält die Mittelposition beim Verschieben bei
   • Skalen zwischen 1 und 1,1
   • Erzeugt einen Atmungseffekt
2. rotateGradient:
   • Vollständige 360-Grad-Drehung
   • Kontinuierliche Bewegung
   • Fügt Dynamik hinzu

8. Tiefer Einblick in das Partikelsystem

body {
    margin: 0;
    overflow: hidden;
    background: black;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

Partikeleigenschaften:

1. Basispartikel:
   • Feste Positionierung
   • Halbtransparentes Weiß
   • Kreisform
   • Keine Zeigerereignisse
2. Größenvarianten:
   • Responsive Größenanpassung mit min()
   • Unterschiedliche Animationsgeschwindigkeiten
   • Behält die Proportionen auf allen Geräten bei

9. Partikelbewegungsanimation

.light-effect {
    width: var(--blur-size);
    height: var(--blur-size);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(calc(var(--blur-size) * 0.25));
    animation: pulseNeon 8s ease-in-out infinite;
}

Bewegungsaufschlüsselung:

1. Start (0%):
   • Beginnen Sie unterhalb des Ansichtsfensters
   • Unsichtbarer Zustand
2. Einblenden (20 %):
   • Sanfter Deckkraftübergang
3. Hauptbewegung (20-80%):
   • Volle Sichtbarkeit
   • Stetige Aufwärtsbewegung
4. Ausstieg (80-100 %):
   • Ausblendeffekt
   • Leichte Überlappung über dem Ansichtsfenster

10. Dynamische Partikelerzeugung

.light-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.2) 0%,
        rgba(72, 61, 139, 0.15) 30%,
        rgba(0, 0, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
}

Funktionsanalyse:

1. Partikelerstellung:
   • Dynamische DOM-Elementerstellung
   • Zufällige Größenzuweisung
   • Probabilistische Verteilung
2. Positionierungslogik:
   • Zufällige horizontale Platzierung
   • Zufällige Animationsverzögerung
3. Speicherverwaltung:
   • Automatische Bereinigung
   • Dauer je nach Größe
   • Verhindert Speicherlecks

11. Responsive Design-Implementierung

.light-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 40%,
        rgba(0, 0, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 80%);
    animation: rotateGradient 10s linear infinite;
    mix-blend-mode: screen;
}

Responsive Überlegungen:

1. Tablet-Geräte (≤768px):
   • Erhöhte relative Größe
   • Behält die Proportionen bei
2. Mobile Geräte (≤480px):
   • Maximale relative Größe
   • Optimiert für kleine Bildschirme

12. Leistungsoptimierung

@keyframes pulseNeon {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

Optimierungsstrategien:

1. Reaktionsintervalle:
   • Weniger Partikel auf Mobilgeräten
   • Passt sich den Gerätefunktionen an
2. Speicherverwaltung:
   • Löscht alte Intervalle
   • Verhindert mehrere Instanzen
3. Ereignisbehandlung:
   • Reagiert auf Fenstergrößenänderung
   • Erhält die Leistung

Abschluss

Dieser Effekt kombiniert mehrere Ebenen der Raffinesse:

• Dynamische CSS-Variablen für reaktionsfähige Größenanpassung
• Komplexe Farbverlaufskombinationen für realistischen Glanz
• Partikelsystem für zusätzliche Tiefe
• Leistungsoptimierungen für einen reibungslosen Betrieb
• Responsives Design für alle Geräte

Das Ergebnis ist ein fesselnder Neoneffekt, der jedes Webprojekt mit minimalen Auswirkungen auf die Leistung verbessern kann.