<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷霓虹灯效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0a0a0a;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
}
/* 霓虹灯文字容器 */
.neon-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
/* 霓虹灯文字 */
.neon-text {
font-size: 80px;
font-weight: bold;
font-family: 'Arial Black', sans-serif;
text-transform: uppercase;
color: #fff;
position: relative;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #fff,
0 0 80px #fff;
animation: glow 1.5s ease-in-out infinite alternate;
}
/* 不同颜色的霓虹灯 */
.neon-text.pink {
text-shadow:
0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de,
0 0 40px #ff00de,
0 0 80px #ff00de;
animation: glow-pink 1.5s ease-in-out infinite alternate;
}
.neon-text.blue {
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 80px #00ffff;
animation: glow-blue 1.5s ease-in-out infinite alternate;
}
.neon-text.green {
text-shadow:
0 0 5px #00ff00,
0 0 10px #00ff00,
0 0 20px #00ff00,
0 0 40px #00ff00,
0 0 80px #00ff00;
animation: glow-green 1.5s ease-in-out infinite alternate;
}
.neon-text.yellow {
text-shadow:
0 0 5px #ffff00,
0 0 10px #ffff00,
0 0 20px #ffff00,
0 0 40px #ffff00,
0 0 80px #ffff00;
animation: glow-yellow 1.5s ease-in-out infinite alternate;
}
.neon-text.red {
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000,
0 0 80px #ff0000;
animation: glow-red 1.5s ease-in-out infinite alternate;
}
/* 发光动画 */
@keyframes glow-pink {
from {
text-shadow:
0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de,
0 0 40px #ff00de;
}
to {
text-shadow:
0 0 10px #ff00de,
0 0 20px #ff00de,
0 0 40px #ff00de,
0 0 80px #ff00de,
0 0 100px #ff00de;
}
}
@keyframes glow-blue {
from {
text-shadow:
0 0 5px #00ffff,
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff;
}
to {
text-shadow:
0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 40px #00ffff,
0 0 80px #00ffff,
0 0 100px #00ffff;
}
}
@keyframes glow-green {
from {
text-shadow:
0 0 5px #00ff00,
0 0 10px #00ff00,
0 0 20px #00ff00,
0 0 40px #00ff00;
}
to {
text-shadow:
0 0 10px #00ff00,
0 0 20px #00ff00,
0 0 40px #00ff00,
0 0 80px #00ff00,
0 0 100px #00ff00;
}
}
@keyframes glow-yellow {
from {
text-shadow:
0 0 5px #ffff00,
0 0 10px #ffff00,
0 0 20px #ffff00,
0 0 40px #ffff00;
}
to {
text-shadow:
0 0 10px #ffff00,
0 0 20px #ffff00,
0 0 40px #ffff00,
0 0 80px #ffff00,
0 0 100px #ffff00;
}
}
@keyframes glow-red {
from {
text-shadow:
0 0 5px #ff0000,
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000;
}
to {
text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000,
0 0 80px #ff0000,
0 0 100px #ff0000;
}
}
/* 霓虹管边框效果 */
.neon-box {
margin-top: 50px;
padding: 30px 60px;
font-size: 24px;
color: #fff;
border: 3px solid #ff00de;
border-radius: 10px;
box-shadow:
0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de,
inset 0 0 5px #ff00de,
inset 0 0 10px #ff00de;
animation: box-glow 1.5s ease-in-out infinite alternate;
}
@keyframes box-glow {
from {
box-shadow:
0 0 5px #ff00de,
0 0 10px #ff00de,
0 0 20px #ff00de,
inset 0 0 5px #ff00de;
}
to {
box-shadow:
0 0 10px #ff00de,
0 0 20px #ff00de,
0 0 40px #ff00de,
inset 0 0 10px #ff00de,
inset 0 0 20px #ff00de;
}
}
/* 闪烁效果 */
.neon-flicker {
animation: flicker 0.1s infinite;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 24%, 55% {
opacity: 0.4;
}
}
/* 副标题 */
.subtitle {
margin-top: 40px;
font-size: 18px;
color: #888;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="neon-container">
<span class="neon-text pink">N</span>
<span class="neon-text blue">E</span>
<span class="neon-text green">O</span>
<span class="neon-text yellow">N</span>
</div>
<div class="neon-container">
<span class="neon-text pink" style="animation-delay: 0s;">L</span>
<span class="neon-text blue" style="animation-delay: 0.2s;">O</span>
<span class="neon-text green" style="animation-delay: 0.4s;">V</span>
<span class="neon-text yellow" style="animation-delay: 0.6s;">E</span>
</div>
<div class="neon-box">
<span class="neon-flicker">💡 点击效果 💡</span>
</div>
<p class="subtitle">NEON LIGHTS EFFECT</p>
</body>
</html>实现原理
1. 霓虹灯核心：text-shadow
.neon-text {
color: #fff;
text-shadow:
0 0 5px #fff, /* 第一层光晕 */
0 0 10px #fff, /* 第二层光晕 */
0 0 20px #fff, /* 第三层光晕 */
0 0 40px #fff, /* 第四层光晕 */
0 0 80px #fff; /* 第五层光晕 */
}关键点：
- 多个阴影用逗号分隔
- 阴影偏移都为0
- 逐渐增大模糊半径
- 模拟霓虹灯的层层光晕
2. 不同颜色的霓虹灯
/* 粉色霓虹 */
text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de...;
/* 青色霓虹 */
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff...;
/* 绿色霓虹 */
text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00...;
/* 黄色霓虹 */
text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00...;
/* 红色霓虹 */
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000...;3. 动态发光效果
@keyframes glow {
from {
text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de;
}
to {
text-shadow: 0 0 20px #ff00de, 0 0 40px #ff00de, 0 0 80px #ff00de;
}
}
.neon-text {
animation: glow 1.5s ease-in-out infinite alternate;
}4. 霓虹管边框效果
.neon-box {
border: 3px solid #ff00de;
border-radius: 10px;
box-shadow:
0 0 5px #ff00de, /* 外发光 */
0 0 10px #ff00de,
0 0 20px #ff00de,
inset 0 0 5px #ff00de, /* 内发光 */
inset 0 0 10px #ff00de;
}关键：inset 关键字创建内阴影，模拟灯管内部发光。
5. 闪烁效果
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 24%, 55% {
opacity: 0.4; /* 变暗模拟闪烁 */
}
}
.neon-flicker {
animation: flicker 0.1s infinite;
}进阶：自定义效果
改变霓虹灯颜色
只需修改颜色值即可：
/* 紫色霓虹 */
text-shadow: 0 0 10px #9b59b6...;
/* 橙色霓虹 */
text-shadow: 0 0 10px #e67e22...;
/* 青色霓虹 */
text-shadow: 0 0 10px #1abc9c...;调整发光强度
/* 柔和发光 */
text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de;
/* 强烈发光 */
text-shadow: 0 0 20px #ff00de, 0 0 40px #ff00de, 0 0 80px #ff00de;改变闪烁速度
/* 快速闪烁 */
animation: flicker 0.05s infinite;
/* 慢速闪烁 */
animation: flicker 0.5s infinite;应用场景
- 🎮 游戏官网 - 炫酷游戏标题
- 💻 个人主页 - 吸引眼球的自我介绍
- 🛒 电商活动 - 促销广告标语
- 📱 App启动页 - 品牌Logo展示
完整代码
复制上面的完整HTML代码，保存为 .html 文件即可直接使用！
评语 (0)