HTML、CSS、JavaScript を使用して浮遊粒子のネオンライト効果を作成する-CSSチュートリアル-php.cn

HTML、CSS、JavaScript を使用して浮遊粒子のネオンライト効果を作成する

DDD

リリース： 2024-12-11 15:27:16

オリジナル

167 人が閲覧しました

このチュートリアルでは、純粋な 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: ビューポート全体を確実にカバーします
表示: フレックス: 中央配置を有効にします
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);
}

ログイン後にコピー

アニメーションの詳細:

パルスネオン:
- 平行移動で中心位置を維持します
- スケールは 1 ～ 1.1 です
- 呼吸効果を作成します
rotateGradient:
- 完全 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);
    }
}

ログイン後にコピー

最適化戦略: