Heim >Web-Frontend >CSS-Tutorial >Erstellen eines Neonlichteffekts mit schwebenden Partikeln mit HTML, CSS und JavaScript

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

DDDOriginal: 2024-12-11 15:27:16180Durchsuche

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>

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

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:

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

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

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>

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

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

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

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

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

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

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!

JavaScript css html edge for break using Property Event pointer function default dom this display position overflow margin viewport background transform transition animation flex Translate

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?Nächster Artikel：Wie ändere ich eine Bildquellen-URL beim Hover mithilfe von HTML, CSS und JavaScript?

In Verbindung stehende Artikel

Mehr sehen