首页 >web前端 >css教程 >使用 HTML、CSS 和 JavaScript 创建浮动粒子霓虹灯效果

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

DDD原创: 2024-12-11 15:27:16231浏览

在本教程中，我们将使用纯 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);
    }
}

优化策略：

响应间隔：
- 移动设备上的颗粒更少
- 根据设备功能进行调整
内存管理：
- 清除旧间隔
- 防止多个实例
事件处理：
- 响应窗口大小调整
- 保持性能

结论

此效果结合了多层复杂性：

用于响应式调整大小的动态 CSS 变量
复杂的渐变组合带来逼真的光泽
增加深度的粒子系统
性能优化以实现平稳运行
适用于所有设备的响应式设计

结果是迷人的霓虹灯效果，可以增强任何 Web 项目，同时对性能影响最小。

以上是使用 HTML、CSS 和 JavaScript 创建浮动粒子霓虹灯效果的详细内容。更多信息请关注PHP中文网其他相关文章！

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Change an Image Source URL on Hover Using HTML, CSS, and JavaScript?下一篇：How Can I Target iOS Devices Specifically Using CSS Media Queries?

查看更多