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

Heim

Web-Frontend

CSS-Tutorial

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

DDD

Dec 11, 2024 pm 03:27 PM

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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vor By DDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vor By DDD

Inzoi: Wie man sich für Schule und Universität bewerbt

4 Wochen vor By DDD

Wie kann ich KB5055518 in Windows 10 nicht installieren?

2 Wochen vor By DDD

Roblox: Dead Rails - wie man Nikola Tesla beschwört und besiegt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7861

Java-Tutorial

1649

CakePHP-Tutorial

1403

Laravel-Tutorial

1300

PHP-Tutorial

1242

Related knowledge

Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Apr 02, 2025 am 04:27 AM

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet? Apr 05, 2025 pm 05:51 PM

Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...

So verwenden Sie CSS -Gitter für klebrige Header und Fußzeilen Apr 02, 2025 pm 06:29 PM

CSS Grid ist eine Sammlung von Eigenschaften, die das Layout einfacher machen als jemals zuvor. Wie alles andere ist es eine kleine Lernkurve, aber das Gitter ist

See all articles