\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
  這個(gè)變量至關(guān)重要，因?yàn)椋?\/p>\n\n
  \n
  使用 min() 確保響應(yīng)式大小調(diào)整<\/li>\n
  組合視口寬度 (vw) 和高度 (vh)<\/li>\n
  在不同的屏幕尺寸上創(chuàng)建比例效果<\/li>\n<\/ul>\n\n
  \n  \n  \n  3. 身體造型深入研究\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
  讓我們分解每個(gè)屬性：<\/p>\n\n
  \n
  \nmargin: 0: 刪除默認(rèn)間距<\/li>\n
  \n溢出：隱藏：防止?jié)L動(dòng)條并包含粒子<\/li>\n
  \n背景：黑色：為霓虹燈效果創(chuàng)建對(duì)比度<\/li>\n
  \n高度\/寬度：100vh\/vw：確保完全視口覆蓋<\/li>\n
  \ndisplay: flex: 啟用居中定位<\/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
  關(guān)鍵方面解釋：<\/p>\n\n
  \n
  \n調(diào)整大小<\/strong>：使用 CSS 變量實(shí)現(xiàn)響應(yīng)式尺寸<\/li>\n
  \n定位<\/strong>：\n\n
  \n
  \n位置：固定：確保滾動(dòng)過程中的穩(wěn)定性<\/li>\n
  \n上\/左：50%：位于視口中心的位置<\/li>\n
  \n變換：翻譯（-50％，-50％）：完美居中<\/li>\n<\/ul>\n<\/li>\n
  \n模糊效果<\/strong>：\n\n
  \n
  基于大小的動(dòng)態(tài)模糊<\/li>\n
  創(chuàng)造柔和、逼真的光澤<\/li>\n<\/ul>\n<\/li>\n
  \n動(dòng)畫<\/strong>：\n\n
  \n
  8秒持續(xù)時(shí)間，效果流暢<\/li>\n
  \n自然運(yùn)動(dòng)的緩入時(shí)機(jī)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
  \n  \n  \n  5. 內(nèi)部光層細(xì)節(jié)\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% 的紫色調(diào)<\/li>\n
  創(chuàng)造核心亮度<\/li>\n<\/ul>\n<\/li>\n
  \n中層（30%）<\/strong>：\n\n
  \n
  不透明度為 15% 時(shí)呈深紫色<\/li>\n
  增加深度<\/li>\n<\/ul>\n<\/li>\n
  \n外層（50%）<\/strong>：\n\n
  \n
  不透明度為 10% 的藍(lán)色調(diào)<\/li>\n
  創(chuàng)建過渡<\/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ì)節(jié)\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
  特效分解：<\/p>\n
  \n
  \n梯度結(jié)構(gòu)<\/strong>：\n\n
  \n
  白色中心的強(qiáng)度<\/li>\n
  紫色中間顏色<\/li>\n
  藍(lán)色外層有深度<\/li>\n<\/ul>\n<\/li>\n
  \n動(dòng)畫<\/strong>：\n\n
  \n
  10秒旋轉(zhuǎn)<\/li>\n
  線性定時(shí)，實(shí)現(xiàn)平穩(wěn)運(yùn)動(dòng)<\/li>\n<\/ul>\n<\/li>\n
  \n混合<\/strong>：\n\n
  \n
  \n屏幕模式發(fā)光效果<\/li>\n
  增強(qiáng)光澤和色彩混合<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n
  \n  \n  \n  7. 動(dòng)畫關(guān)鍵幀解釋\n<\/h2>\n\n\n\n
  \n\n\n