文字霓虹灯效果是网页中常见的视觉装饰，利用HTML5定义文字结构，再结合CSS3的阴影与动画就能轻松实现。下面介绍具体的制作方式。
实现原理
霓虹灯的核心视觉是“发光”和“闪烁”。在CSS3中，我们可以用text-shadow叠加多层不同模糊半径的阴影来模拟光晕，再用@keyframes定义透明度或阴影强度的变化，让文字看起来像灯管一样呼吸或闪动。
HTML结构
使用HTML5的<h1>标签包裹需要发光的内容即可，结构非常简洁：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>霓虹灯文字</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="neon">你好，霓虹灯</h1> </body> </html>
CSS3样式与动画
通过text-shadow制造多层光晕，并用animation让发光强度周期变化：
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.neon {
color: #fff;
font-size: 48px;
/* 多层阴影模拟霓虹光晕 */
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
animation: flicker 1.5s infinite alternate;
}
/* 定义闪烁动画 */
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
关键点说明
- text-shadow可以写多组值，模糊半径越大光晕越散，颜色决定灯管色调。
- animation的alternate让动画来回播放，看起来更自然。
- 若想换颜色，只需把#0ff改成其他亮色，如#f0f、#0f0。
完整可运行代码
将以下代码保存为html文件直接在浏览器打开即可看到效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>霓虹灯文字效果</title>
<style>
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.neon {
color: #fff;
font-size: 48px;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
</style>
</head>
<body>
<h1 class="neon">你好，霓虹灯</h1>
</body>
</html>
通过以上HTML5与CSS3的组合，就能用很少的代码做出文字霓虹灯效果，你可以根据页面风格调整颜色和动画节奏。
CSS3HTML5neon_text_effect修改时间：2026-07-29 06:09:20