Création d'un effet de lumière néon à particules flottantes avec HTML, CSS et JavaScript-tutoriel CSS-php.cn

Création d'un effet de lumière néon à particules flottantes avec HTML, CSS et JavaScript

DDD

Libérer： 2024-12-11 15:27:16

original

167 Les gens l'ont consulté

Dans ce didacticiel, nous allons créer un effet de lumière néon captivant avec des particules flottantes en utilisant du HTML, CSS et JavaScript purs. Nous décomposerons chaque composant et expliquerons comment ils fonctionnent ensemble pour créer cet effet visuel époustouflant.

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

1. Comprendre la structure de base

Commençons par décomposer la structure HTML de base :

<!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>

Copier après la connexion

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

Copier après la connexion

Cette variable est cruciale car :

Utilise min() pour garantir un dimensionnement réactif
Combine la largeur de la fenêtre (vw) et la hauteur (vh)
Crée un effet proportionnel sur différentes tailles d'écran

3. Analyse approfondie du style corporel

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

Copier après la connexion

Décomposons chaque propriété :

margin : 0 : supprime l'espacement par défaut
overflow : caché : empêche les barres de défilement et contient des particules
fond : noir : Crée du contraste pour l'effet néon
hauteur/largeur : 100vh/vw : assure une couverture complète de la fenêtre
display : flex : Permet le positionnement centré
justifier-content/align-items : center : Centrage parfait

4. Le conteneur principal d’effet de lumière

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

Copier après la connexion

Aspects clés expliqués :

Dimensionnement : utilise la variable CSS pour les dimensions réactives
Positionnement :
- position : fixe : Assure la stabilité lors du défilement
- haut/gauche : 50 % : Positions au centre de la fenêtre
- transform: translation(-50%, -50%) : Centrage parfait
Effet de flou :
- Flou dynamique basé sur la taille
- Crée une lueur douce et réaliste
Animation :
- Durée de 8 secondes pour un effet fluide
- timing facile pour un mouvement naturel

5. Détails de la couche de lumière intérieure

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

Copier après la connexion

Analyse des dégradés :

Centre (0%) :
- Ton violet avec 20% d'opacité
- Crée une luminosité centrale
Couche intermédiaire (30%) :
- Violet plus foncé à 15 % d'opacité
- Ajoute de la profondeur
Couche extérieure (50%) :
- Ton bleu à 10 % d'opacité
- Crée une transition
Bord (70%) :
- Fondu en transparent
- Mélange des bords en douceur

6. Détails de la couche de lumière externe

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

Copier après la connexion

Répartition des effets spéciaux :

Structure Dégradée :
- Centre blanc pour l'intensité
- Milieu violet pour la couleur
- Extérieur bleu pour la profondeur
Animation :
- Rotation de 10 secondes
- Synchronisation linéaire pour un mouvement fluide
Mélange :
- mode écran pour effet lumineux
- Améliore l'éclat et le mélange des couleurs

7. Images clés d'animation expliquées

<!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>

Copier après la connexion

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

Copier après la connexion

Détails de l'animation :

pulseNeon :
- Maintient la position centrale avec traduction
- Échelles entre 1 et 1,1
- Crée un effet respiratoire
rotateGradient :
- Rotation complète à 360 degrés
- Mouvement continu
- Ajoute du dynamisme

8. Analyse approfondie du système de particules

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

Copier après la connexion

Caractéristiques des particules :

Particule de base :
- Positionnement fixe
- Blanc semi-transparent
- Forme circulaire
- Aucun événement de pointeur
Variantes de taille :
- Dimensionnement réactif utilisant min()
- Différentes vitesses d'animation
- Maintient les proportions sur tous les appareils

9. Animation du mouvement des particules

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

Copier après la connexion

Répartition des mouvements :

Démarrer (0%) :
- Commencez sous la fenêtre d'affichage
- État invisible
Fondu entrant (20%) :
- Transition d'opacité douce
Mouvement principal (20-80%) :
- Visibilité totale
- Mouvement ascendant constant
Sortie (80-100%) :
- Effet de fondu
- Léger chevauchement au-dessus de la fenêtre

10. Génération dynamique de particules

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

Copier après la connexion

Analyse des fonctions :

Création de particules :
- Création d'éléments DOM dynamiques
- Assignation de taille aléatoire
- Distribution probabiliste
Logique de positionnement :
- Placement horizontal aléatoire
- Délai d'animation aléatoire
Gestion de la mémoire :
- Nettoyage automatique
- Durée en fonction de la taille
- Empêche les fuites de mémoire

11. Mise en œuvre de la conception réactive

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

Copier après la connexion

Considérations réactives :

Tablettes (≤768px) :
- Augmentation de la taille relative
- Maintient les proportions
Appareils mobiles (≤480px) :
- Taille relative maximale
- Optimisé pour les petits écrans

12. Optimisation des performances

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

Copier après la connexion

Stratégies d'optimisation :

Intervalles de réponse :
- Moins de particules sur mobile
- S'adapte aux capacités de l'appareil
Gestion de la mémoire :
- Efface les anciens intervalles
- Empêche plusieurs instances
Gestion des événements :
- Répond au redimensionnement de la fenêtre
- Maintient les performances