In this tutorial, we'll build a captivating neon light effect with floating particles using pure HTML, CSS, and JavaScript. We'll break down each component and explain how they work together to create this stunning visual effect.
![Creating a Floating Particles Neon Light Effect with HTML, CSS, and JavaScript](https://img.php.cn/upload/article/000/000/000/173390205689240.jpg)
1. Understanding the Core Structure
Let's start by breaking down the basic HTML structure:
<!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>
Copy after login
Copy after login
-
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);
}
Copy after login
Copy after login
This variable is crucial because:
- Uses min() to ensure responsive sizing
- Combines viewport width (vw) and height (vh)
- Creates a proportional effect across different screen sizes
3. Body Styling Deep Dive
body {
margin: 0;
overflow: hidden;
background: black;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
Copy after login
Copy after login
Let's break down each property:
-
margin: 0: Removes default spacing
-
overflow: hidden: Prevents scrollbars and contains particles
-
background: black: Creates contrast for the neon effect
-
height/width: 100vh/vw: Ensures full viewport coverage
-
display: flex: Enables centered positioning
-
justify-content/align-items: center: Perfect centering
4. The Main Light Effect Container
.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;
}
Copy after login
Copy after login
Key aspects explained:
-
Sizing: Uses the CSS variable for responsive dimensions
-
Positioning:
-
position: fixed: Ensures stability during scrolling
-
top/left: 50%: Positions at viewport center
-
transform: translate(-50%, -50%): Perfect centering
-
Blur Effect:
- Dynamic blur based on size
- Creates soft, realistic glow
-
Animation:
- 8-second duration for smooth effect
-
ease-in-out timing for natural movement
5. Inner Light Layer Details
.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;
}
Copy after login
Copy after login
Gradient analysis:
-
Center (0%):
- Purple tone with 20% opacity
- Creates core brightness
-
Middle Layer (30%):
- Darker purple at 15% opacity
- Adds depth
-
Outer Layer (50%):
- Blue tone at 10% opacity
- Creates transition
-
Edge (70%):
- Fades to transparent
- Smooth edge blending
6. Outer Light Layer Details
.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;
}
Copy after login
Copy after login
Special effects breakdown:
-
Gradient Structure:
- White center for intensity
- Purple middle for color
- Blue outer for depth
-
Animation:
- 10-second rotation
- Linear timing for smooth movement
-
Blending:
-
screen mode for luminous effect
- Enhances glow and color mixing
7. Animation Keyframes Explained
<!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>
Copy after login
Copy after login
-
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);
}
Copy after login
Copy after login
Animation details:
-
pulseNeon:
- Maintains center position with translate
- Scales between 1 and 1.1
- Creates breathing effect
-
rotateGradient:
- Full 360-degree rotation
- Continuous movement
- Adds dynamism
8. Particle System Deep Dive
body {
margin: 0;
overflow: hidden;
background: black;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
Copy after login
Copy after login
Particle characteristics:
-
Base Particle:
- Fixed positioning
- Semi-transparent white
- Circular shape
- No pointer events
-
Size Variants:
- Responsive sizing using min()
- Different animation speeds
- Maintains proportions on all devices
9. Particle Movement Animation
.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;
}
Copy after login
Copy after login
Movement breakdown:
-
Start (0%):
- Begin below viewport
- Invisible state
-
Fade In (20%):
- Smooth opacity transition
-
Main Movement (20-80%):
- Full visibility
- Steady upward motion
-
Exit (80-100%):
- Fade out effect
- Slight overlap above viewport
10. Dynamic Particle Generation
.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;
}
Copy after login
Copy after login
Function analysis:
-
Particle Creation:
- Dynamic DOM element creation
- Random size assignment
- Probabilistic distribution
-
Positioning Logic:
- Random horizontal placement
- Random animation delay
-
Memory Management:
- Automatic cleanup
- Duration based on size
- Prevents memory leaks
11. Responsive Design Implementation
.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;
}
Copy after login
Copy after login
Responsive considerations:
-
Tablet Devices (≤768px):
- Increased relative size
- Maintains proportions
-
Mobile Devices (≤480px):
- Maximum relative size
- Optimized for small screens
12. Performance Optimization
@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);
}
}
Copy after login
Optimization strategies:
-
Responsive Intervals:
- Fewer particles on mobile
- Adjusts to device capabilities
-
Memory Management:
- Clears old intervals
- Prevents multiple instances
-
Event Handling:
- Responds to window resize
- Maintains performance
Conclusion
This effect combines multiple layers of sophistication:
- Dynamic CSS variables for responsive sizing
- Complex gradient combinations for realistic glow
- Particle system for added depth
- Performance optimizations for smooth operation
- Responsive design for all devices
The result is a captivating neon effect that can enhance any web project with minimal performance impact.
The above is the detailed content of Creating a Floating Particles Neon Light Effect with HTML, CSS, and JavaScript. For more information, please follow other related articles on the PHP Chinese website!