使用 HTML、CSS 和 JavaScript 创建浮动粒子霓虹灯效果-css教程-PHP中文网

首页

web前端

css教程

使用 HTML、CSS 和 JavaScript 创建浮动粒子霓虹灯效果

DDD

Dec 11, 2024 pm 03:27 PM

在本教程中，我们将使用纯 HTML、CSS 和 JavaScript 构建带有浮动粒子的迷人霓虹灯效果。我们将分解每个组件并解释它们如何协同工作来创造这种令人惊叹的视觉效果。

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

1. 理解核心结构

让我们从分解基本的 HTML 结构开始：

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

登录后复制

这个变量至关重要，因为：

使用 min() 确保响应式大小调整
组合视口宽度 (vw) 和高度 (vh)
在不同的屏幕尺寸上创建比例效果

3. 身体造型深入研究

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

登录后复制

让我们分解每个属性：

margin: 0: 删除默认间距
溢出：隐藏：防止滚动条并包含粒子
背景：黑色：为霓虹灯效果创建对比度
高度/宽度：100vh/vw：确保完全视口覆盖
display: flex: 启用居中定位
justify-content/align-items: center: 完美居中

4. 主要光效容器

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

登录后复制

关键方面解释：

调整大小：使用 CSS 变量实现响应式尺寸
定位：
- 位置：固定：确保滚动过程中的稳定性
- 上/左：50%：位于视口中心的位置
- 变换：翻译（-50％，-50％）：完美居中
模糊效果：
- 基于大小的动态模糊
- 创造柔和、逼真的光泽
动画：
- 8秒持续时间，效果流畅
- 自然运动的缓入时机

5. 内部光层细节

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

登录后复制

梯度分析：

中心（0%）：
- 不透明度为 20% 的紫色调
- 创造核心亮度
中层（30%）：
- 不透明度为 15% 时呈深紫色
- 增加深度
外层（50%）：
- 不透明度为 10% 的蓝色调
- 创建过渡
边缘（70%）：
- 淡入透明
- 平滑边缘融合

6. 外部光层细节

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

登录后复制

特效分解：

梯度结构：
- 白色中心的强度
- 紫色中间颜色
- 蓝色外层有深度
动画：
- 10秒旋转
- 线性定时，实现平稳运动
混合：
- 屏幕模式发光效果
- 增强光泽和色彩混合

7. 动画关键帧解释

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

登录后复制

动画详情：

pulseNeon：
- 通过翻译保持中心位置
- 范围在 1 到 1.1 之间
- 创造呼吸效果
旋转渐变：
- 360度全方位旋转
- 持续运动
- 增添活力

8. 粒子系统深入研究

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

登录后复制

颗粒特征：

基础粒子：
- 固定定位
- 半透明白色
- 圆形
- 没有指针事件
尺寸变化：
- 使用 min() 响应式调整大小
- 不同的动画速度
- 在所有设备上保持比例

9. 粒子运动动画

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

登录后复制

动作分解：

开始（0%）：
- 从视口下方开始
- 隐形状态
淡入（20%）：
- 平滑的不透明度过渡
主要动作（20-80%）：
- 完全可见
- 稳定向上运动
退出（80-100%）：
- 淡出效果
- 视口上方轻微重叠

10.动态粒子生成

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

登录后复制

函数分析：

粒子创建：
- 动态 DOM 元素创建
- 随机大小分配
- 概率分布
定位逻辑：
- 随机水平放置
- 随机动画延迟
内存管理：
- 自动清理
- 持续时间根据大小
- 防止内存泄漏

11.响应式设计实现

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

登录后复制

响应注意事项：

平板电脑设备（≤768px）：
- 相对尺寸增加
- 保持比例
移动设备（≤480px）：
- 最大相对尺寸
- 针对小屏幕进行了优化

12. 性能优化

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

登录后复制

优化策略：