在本教程中,我们将使用纯 HTML、CSS 和 JavaScript 构建带有浮动粒子的迷人霓虹灯效果。我们将分解每个组件并解释它们如何协同工作来创造这种令人惊叹的视觉效果。
让我们从分解基本的 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>
First, let's understand our CSS variables:
:root { --blur-size: min(40vw, 40vh); }
这个变量至关重要,因为:
body { margin: 0; overflow: hidden; background: black; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
让我们分解每个属性:
.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; }
关键方面解释:
.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; }
梯度分析:
.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; }
特效分解:
<!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>
First, let's understand our CSS variables:
:root { --blur-size: min(40vw, 40vh); }
动画详情:
body { margin: 0; overflow: hidden; background: black; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; }
颗粒特征:
.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; }
动作分解:
.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; }
函数分析:
.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; }
响应注意事项:
@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); } }
优化策略:
此效果结合了多层复杂性:
结果是迷人的霓虹灯效果,可以增强任何 Web 项目,同时对性能影响最小。
以上是使用 HTML、CSS 和 JavaScript 创建浮动粒子霓虹灯效果的详细内容。更多信息请关注PHP中文网其他相关文章!