Erstellen eines Neonlichteffekts mit schwebenden Partikeln mit HTML, CSS und JavaScript-CSS-Tutorial-php.cn

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.

Creating a Floating Particles Neon Light Effect with HTML, CSS, and JavaScript

1. Die Kernstruktur verstehen

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

<!DOCTYPE html>
<html>
<head>
    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>



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

Nach dem Login kopieren

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

2. CSS Variables and Root Setup

First, let's understand our CSS variables:

:root {
    --blur-size: min(40vw, 40vh);
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

Wichtige Aspekte erklärt:

Größenanpassung: Verwendet die CSS-Variable für responsive Abmessungen
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
Unschärfeeffekt:
- Dynamische Unschärfe basierend auf der Größe
- Erzeugt einen weichen, realistischen Glanz
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;
}

Nach dem Login kopieren

Gradientenanalyse:

Mitte (0 %):
- Violettton mit 20 % Deckkraft
- Erzeugt Kernhelligkeit
Mittelschicht (30 %):
- Dunkleres Lila bei 15 % Deckkraft
- Fügt Tiefe hinzu
Äußere Schicht (50 %):
- Blauton bei 10 % Deckkraft
- Erstellt einen Übergang
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;
}

Nach dem Login kopieren

Aufschlüsselung der Spezialeffekte:

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

7. Animations-Keyframes erklärt

<!DOCTYPE html>
<html>
<head>
    <title>Neon Light Effect</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>



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

Nach dem Login kopieren

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

2. CSS Variables and Root Setup

First, let's understand our CSS variables:

:root {
    --blur-size: min(40vw, 40vh);
}

Nach dem Login kopieren

Animationsdetails:

pulseNeon:
- Behält die Mittelposition beim Verschieben bei
- Skalen zwischen 1 und 1,1
- Erzeugt einen Atmungseffekt
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;
}

Nach dem Login kopieren

Partikeleigenschaften:

Basispartikel:
- Feste Positionierung
- Halbtransparentes Weiß
- Kreisform
- Keine Zeigerereignisse
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;
}

Nach dem Login kopieren

Bewegungsaufschlüsselung:

Start (0%):
- Beginnen Sie unterhalb des Ansichtsfensters
- Unsichtbarer Zustand
Einblenden (20 %):
- Sanfter Deckkraftübergang
Hauptbewegung (20-80%):
- Volle Sichtbarkeit
- Stetige Aufwärtsbewegung
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;
}

Nach dem Login kopieren

Funktionsanalyse:

Partikelerstellung:
- Dynamische DOM-Elementerstellung
- Zufällige Größenzuweisung
- Probabilistische Verteilung
Positionierungslogik:
- Zufällige horizontale Platzierung
- Zufällige Animationsverzögerung
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;
}

Nach dem Login kopieren

Responsive Überlegungen:

Tablet-Geräte (≤768px):
- Erhöhte relative Größe
- Behält die Proportionen bei
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);
    }
}

Nach dem Login kopieren

Optimierungsstrategien:

Reaktionsintervalle:
- Weniger Partikel auf Mobilgeräten
- Passt sich den Gerätefunktionen an
Speicherverwaltung:
- Löscht alte Intervalle
- Verhindert mehrere Instanzen
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.

Das obige ist der detaillierte Inhalt vonErstellen eines Neonlichteffekts mit schwebenden Partikeln mit HTML, CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!