用HTML与CSS制作霓虹灯发光文字效果
在网页设计中，霓虹灯风格的发光文字能带来强烈的视觉冲击力，常用于活动宣传页、游戏官网、创意作品展示等场景。实现这种效果不需要复杂的JavaScript逻辑，仅通过HTML的结构搭建和CSS的样式设置就能完成，下面我们一步步拆解实现过程。
一、基础结构搭建
首先我们需要准备最基础的HTML结构，只需要一个用于承载发光文字的容器标签即可，这里选择<h1>标签作为标题容器，当然也可以根据需求换成<p>、<div>等标签。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>霓虹灯发光文字效果</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="neon-text">霓虹灯发光文字</h1> </body> </html>
这里给<h1>标签添加了neon-text类名，后续我们会通过这个类名来编写对应的CSS样式。
二、核心CSS样式实现
霓虹灯效果的核心是文字本身的颜色设置、多层阴影叠加以及可选的闪烁动画，下面我们分步骤编写CSS代码。
1. 基础页面样式
为了让霓虹灯效果更明显，我们先给页面设置深色背景，模拟夜晚的环境：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0a0a1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}2. 霓虹灯文字核心样式
霓虹灯文字的关键是text-shadow属性的多层叠加，通过不同模糊程度、不同透明度的同色阴影，模拟出光线向外扩散的效果：
.neon-text {
font-size: 4rem;
font-weight: bold;
color: #fff;
/* 霓虹灯核心颜色，这里选择青色 */
--neon-color: #00f3ff;
/* 多层阴影叠加模拟发光效果 */
text-shadow:
0 0 5px var(--neon-color),
0 0 10px var(--neon-color),
0 0 20px var(--neon-color),
0 0 40px var(--neon-color),
0 0 80px var(--neon-color);
/* 可选：添加文字描边增强效果 */
-webkit-text-stroke: 1px var(--neon-color);
}这里的阴影参数含义分别是：水平偏移、垂直偏移、模糊半径、阴影颜色。模糊半径从5px逐步增大到80px，模拟光线从文字边缘向外逐渐扩散的效果，颜色使用半透明的霓虹色调，能让发光效果更自然。
3. 添加闪烁动画（可选）
如果想要更接近真实霓虹灯的闪烁效果，可以添加简单的CSS动画，让发光强度有规律地变化：
.neon-text {
/* 前面已有的样式保持不变 */
animation: neon-flicker 1.5s infinite alternate;
}
@keyframes neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px var(--neon-color),
0 0 10px var(--neon-color),
0 0 20px var(--neon-color),
0 0 40px var(--neon-color),
0 0 80px var(--neon-color);
opacity: 1;
}
20%, 24%, 55% {
text-shadow:
0 0 2px var(--neon-color),
0 0 5px var(--neon-color),
0 0 10px var(--neon-color);
opacity: 0.8;
}
}这个动画模拟了霓虹灯偶尔闪烁变暗的效果，通过在不同时间节点调整阴影的模糊半径和元素透明度，让效果更逼真。
三、效果调整与扩展
我们可以根据自己的需求调整霓虹灯的效果，常见的调整方向如下：
修改
--neon-color变量的值，可以更换霓虹灯的颜色，比如改成粉色#ff00ff、红色#ff0033等。调整
font-size的大小，适配不同的展示场景，字号越大，发光效果的视觉冲击力越强。如果需要多个霓虹灯文字，可以给不同的元素添加不同的颜色变量，实现多彩霓虹灯效果。
如果想要更柔和的光晕，可以增大阴影的模糊半径，或者增加更多的阴影层级。
多彩霓虹灯示例
下面是同时展示两种颜色霓虹灯效果的代码示例：
<div class="neon-container"> <h1 class="neon-text cyan">青色霓虹灯</h1> <h1 class="neon-text pink">粉色霓虹灯</h1> </div>
.neon-container {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
.neon-text {
font-size: 3rem;
font-weight: bold;
color: #fff;
-webkit-text-stroke: 1px currentColor;
}
.neon-text.cyan {
--neon-color: #00f3ff;
color: var(--neon-color);
text-shadow:
0 0 5px var(--neon-color),
0 0 10px var(--neon-color),
0 0 20px var(--neon-color),
0 0 40px var(--neon-color);
}
.neon-text.pink {
--neon-color: #ff00ff;
color: var(--neon-color);
text-shadow:
0 0 5px var(--neon-color),
0 0 10px var(--neon-color),
0 0 20px var(--neon-color),
0 0 40px var(--neon-color);
}四、注意事项
在实现霓虹灯效果时，有几个细节需要注意：
深色背景是霓虹灯效果呈现的前提，浅色背景下发光效果会非常不明显，建议背景色选择#000到#1a1a2e之间的深色。
过多的阴影层级或者过大的模糊半径会影响页面渲染性能，尤其是移动端设备，建议阴影层级控制在5-7层以内。
如果不需要闪烁动画，可以删除对应的
animation属性和@keyframes规则，静态发光效果已经能满足大部分场景需求。部分旧版本浏览器可能不支持CSS变量，如果需要兼容旧浏览器，可以直接把颜色值写死在
text-shadow属性中。
通过以上步骤，你就能快速实现各种风格的霓虹灯发光文字效果，不需要依赖任何第三方库，纯原生HTML和CSS即可完成，适配所有现代浏览器。