回帖：1. 基础发光效果（单色光晕）
css
Copy Code
.glow-text {
color: #fff;
text-shadow: 0 0 10px #00ff00,/* 水平偏移 垂直偏移 模糊半径 颜色 */
0 0 20px #00ff00;
font-size: 3rem;
}
2. 霓虹灯效果（多色渐变）
css
Copy Code
.neon-text {
color: #fff;
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #00ffff,
0 0 80px #00ffff;
animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #ff00ff,
0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 40px #00ffff,
0 0 80px #00ffff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
3. 外发光+内发光组合
css
Copy Code
.combined-glow {
color: rgba(255,255,255,0.8);
text-shadow:
0 0 8px #ff0000,/* 外发光 */
0 0 16px #ff0000,
inset 0 0 8px #ffffff;/* 内发光（需配合背景色） */
background-color: #000;
padding: 20px;
}
‌参数说明：‌
text-shadow格式：x-offset y-offset blur-radius color
多组阴影用逗号分隔可实现叠加效果
使用animation可以实现动态闪烁效果
‌注意事项：‌
发光效果在深色背景上更明显
模糊半径（blur-radius）越大，光晕范围越广
可通过JavaScript动态修改阴影颜色实现交互效果
🚀 ‌高效开发必备工具‌ 🚀
🎯 一键安装IDE插件，智能感知本地环境💡精准解答，深得你心 ✨ 开启高效开发新境界
🚀 ‌立即体验‌ → 👉文心快码