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

登入後複製

最佳化策略：