【CSS特效实战】仅用几行代码实现炫酷发光文字（Glow Text）效果

原创已于 2025-10-25 18:05:18 修改 · 511 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#CSS发光文字 #CSS特效 #text-shadow 教程 #CSS 动画 #前端特效 #发光文字效果 #纯CSS实现发光

于 2025-10-25 18:00:53 首次发布

前端视觉与性能技巧集专栏收录该内容

19 篇文章

订阅专栏

🔍 一、效果预览

👇 Hover 一下看看魔法：

这个“Glow”文字在悬停时闪出柔和光晕，简单又酷炫。接下来我们来详细解析它的实现原理。

💡 二、HTML 结构

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS 发光文字效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <a href="http://csssecrets.io">Glow</a>
</body>
</html>

只需一个 <a> 链接元素。真正的魔力都在 CSS 部分。

🎨 三、CSS 样式详解

body {
  background: #203;
  font: bold 500%/1 Rockwell, serif;
}

a {
  color: #ffc;
  text-decoration: none;
  transition: 1s;
}

a:hover {
  text-shadow: 0 0 .1em, 0 0 .3em;
}

我们逐行分析一下这些代码是如何实现发光的 👇

🧱 1️⃣ 背景与字体

body {
  background: #203;
  font: bold 500%/1 Rockwell, serif;
}

背景色采用深紫色 #203，使发光文字更突出。
字体使用 Rockwell（或 serif 兜底），粗体 + 超大字号（500%），视觉冲击力更强。

🎨 2️⃣ 链接基础样式

a {
  color: #ffc;
  text-decoration: none;
  transition: 1s;
}

柔和的浅黄色 #ffc 与背景形成高对比。
去掉默认下划线，使文字更简洁。
添加过渡动画，让光影变化平滑自然。

💫 3️⃣ Hover 发光魔法

a:hover {
  text-shadow: 0 0 .1em, 0 0 .3em;
}

关键属性是 text-shadow。
通过叠加两层阴影，制造出“光晕”效果：

参数	含义	效果
`0 0 .1em`	小范围亮边	柔和发光
`0 0 .3em`	扩散阴影	外层光晕

多层叠加就能营造出立体的光感。

🌈 四、增强版炫光样式（进阶版）

如果你想要更科幻的霓虹灯效果，可以使用多层渐变阴影：

a:hover {
  text-shadow: 
    0 0 0.2em #fff,
    0 0 0.5em #f0f,
    0 0 1em #f0f;
}

✨ 这样就能实现类似 Neon 光效的闪亮文字，非常适合标题、LOGO、登录按钮等高亮场景。

🧠 五、完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>CSS 发光文字效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      background: #203;
      font: bold 500%/1 Rockwell, serif;
      text-align: center;
      margin-top: 20%;
    }
    a {
      color: #ffc;
      text-decoration: none;
      transition: 1s;
    }
    a:hover {
      text-shadow: 0 0 .1em, 0 0 .3em;
    }
  </style>
</head>
<body>
  <a href="http://csssecrets.io" target="_blank">Glow</a>
</body>
</html>

👉 直接复制到本地 .html 文件中打开即可预览发光效果。

🧩 六、知识拓展：text-shadow 的语法

text-shadow: x-offset y-offset blur-radius color;

例如：

text-shadow: 0 0 10px #f0f;

x-offset / y-offset：阴影的水平与垂直偏移量
blur-radius：模糊半径，值越大越柔和
color：阴影颜色

多个阴影可用逗号分隔叠加，制造更复杂的发光层次。

🚀 七、总结

优点	说明
✅ 实现简单	纯 CSS，无需 JS
✅ 兼容性好	支持所有主流浏览器
✅ 易于定制	可自由调整光色、大小、动画

发光文字（Glow Text）在 UI 设计中非常实用，可用于标题、按钮、游戏界面、登录页等，让你的网页瞬间“亮”起来！