\n\n\n\n

Here's what each element does:<\/p>\n\n<\/pre>\n

\n
• \nlight-effect: Main container for our neon effect<\/li>\n
• \nlight-inner: Creates the core glow effect<\/li>\n
• \nlight-outer: Adds an additional layer of luminosity and rotation<\/li>\n<\/ul>\n\n

  \n \n \n 2. CSS Variables and Root Setup\n<\/h2>\n\n

  First, let's understand our CSS variables:
  \n<\/p>\n\n

  :root {\n    --blur-size: min(40vw, 40vh);\n}\n<\/pre>\n\n\n\n
  この変數(shù)は次の理由から重要です:<\/p>\n\n
  \n
  min() を使用してレスポンシブなサイジングを確保します<\/li>\n
  ビューポートの幅 (vw) と高さ (vh) を組み合わせます<\/li>\n
  さまざまな畫面サイズに比例した効果を作成します<\/li>\n<\/ul>\n\n
  \n  \n  \n  3. ボディスタイリングの詳細(xì)\n<\/h2>\n\n\n\n
  body {\n    margin: 0;\n    overflow: hidden;\n    background: black;\n    height: 100vh;\n    width: 100vw;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n<\/pre>\n\n\n\n
  各プロパティを詳しく見てみましょう:<\/p>\n\n
  \n
  \nmargin: 0: デフォルトの間隔を削除します<\/li>\n
  \nオーバーフロー: 非表示: スクロールバーを防止し、パーティクルを含みます<\/li>\n
  \n背景: 黒: ネオン効果のコントラストを作成します<\/li>\n
  \n高さ\/幅: 100vh\/vw: ビューポート全體を確実にカバーします<\/li>\n
  \n表示: フレックス: 中央配置を有効にします<\/li>\n
  \njustify-content\/align-items: center: 完璧な中央揃え<\/li>\n<\/ul>\n\n
  \n  \n  \n  4. メインの光効果コンテナ\n<\/h2>\n\n\n\n
  .light-effect {\n    width: var(--blur-size);\n    height: var(--blur-size);\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    filter: blur(calc(var(--blur-size) * 0.25));\n    animation: pulseNeon 8s ease-in-out infinite;\n}\n<\/pre>\n\n\n\n
  主要な側(cè)面について説明します:<\/p>\n\n
  \n
  \nサイズ<\/strong>: レスポンシブなサイズに CSS 変數(shù)を使用します<\/li>\n
  \n位置<\/strong>:\n\n
  \n
  \n位置: 固定: スクロール中の安定性を確保<\/li>\n
  \n上\/左: 50%: ビューポートの中心に位置<\/li>\n
  \n変換: 変換(-50%, -50%): 完全なセンタリング<\/li>\n<\/ul>\n<\/li>\n
  \nぼかし効果<\/strong>:\n\n
  \n
  サイズに基づいた動的ブラー<\/li>\n
  柔らかくリアルな輝きを作成します<\/li>\n<\/ul>\n<\/li>\n
  \nアニメーション<\/strong>:\n\n
  \n
  スムーズな効果のための 8 秒間の持続時間<\/li>\n
  \n自然な動きのためのイーズインアウトのタイミング<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
  \n  \n  \n  5. インナーライトレイヤーの詳細(xì)\n<\/h2>\n\n\n\n
  .light-inner {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(circle,\n        rgba(138, 43, 226, 0.2) 0%,\n        rgba(72, 61, 139, 0.15) 30%,\n        rgba(0, 0, 255, 0.1) 50%,\n        rgba(255, 255, 255, 0) 70%);\n    mix-blend-mode: screen;\n}\n<\/pre>\n\n\n\n
  勾配解析:<\/p>\n\n
  \n
  \nセンター (0%)<\/strong>:\n\n
  \n
  不透明度 20% の紫トーン<\/li>\n
  芯の明るさを生み出します<\/li>\n<\/ul>\n<\/li>\n
  \n中間層 (30%)<\/strong>:\n\n
  \n
  不透明度 15% の濃い紫<\/li>\n
  奧行きを加える<\/li>\n<\/ul>\n<\/li>\n
  \n外層 (50%)<\/strong>:\n\n
  \n
  不透明度 10% の青色のトーン<\/li>\n
  トランジションを作成します<\/li>\n<\/ul>\n<\/li>\n
  \nエッジ (70%)<\/strong>:\n\n
  \n
  透明に消えます<\/li>\n
  スムーズなエッジ ブレンディング<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
  \n  \n  \n  6. アウターライトレイヤーの詳細(xì)\n<\/h2>\n\n\n\n
  .light-outer {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background: radial-gradient(circle,\n        rgba(255, 255, 255, 0.15) 0%,\n        rgba(138, 43, 226, 0.1) 40%,\n        rgba(0, 0, 255, 0.05) 60%,\n        rgba(255, 255, 255, 0) 80%);\n    animation: rotateGradient 10s linear infinite;\n    mix-blend-mode: screen;\n}\n<\/pre>\n\n\n\n
  特殊効果の內(nèi)訳:<\/p>\n
  \n
  \nグラデーション構(gòu)造<\/strong>:\n\n
  \n
  強(qiáng)度を表す白い中心<\/li>\n
  紫色の中間色<\/li>\n
  深みのあるブルーのアウター<\/li>\n<\/ul>\n<\/li>\n
  \nアニメーション<\/strong>:\n\n
  \n
  10 秒回転<\/li>\n
  スムーズな動きを?qū)g現(xiàn)するリニアタイミング<\/li>\n<\/ul>\n<\/li>\n
  \nブレンド<\/strong>:\n\n
  \n
  \n発光効果のための畫面モード<\/li>\n
  輝きと色の混合を強(qiáng)化します<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
  \n  \n  \n  7. アニメーションのキーフレームの説明\n<\/h2>\n\n\n\n
  \n\n\n