纯HTML5+CSS3制作的一个超级酷的字体发光效果，知识点不多，只需用到 文字阴影+模糊滤镜+动画延迟。
首先给大家康康效果图：
文章的最后小编放上了效果访问的URL，感兴趣的可以看看！！
如果有朋友们不喜欢太亮的文本阴影，那么可以在css中可以除掉文字阴影。
在关键帧最后这个位置加上
text-shadow:none。
5%,
95% {
color: #111;
filter: blur(0px);
text-shadow: none;
}
HTML 代码区：
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>会发光的字体</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="container"><span>s</span><span>u</span><span>p</span><span>e</span><span>r</span><span>c</span><span>o</span><span>o</span><span>l</span></div></body></html>
css 代码块：
* {margin: 0;padding: 0;}.container {height: 100vh;display: flex; /* 弹性布局,水平，垂直居中*/justify-content: center;align-items: center;background: #333;}span {font-size: 100px;font-weight: bold;text-transform: uppercase; /* 转为大写*/letter-spacing: 5px; /* 字间距*/color: #111;filter: blur(2px); /* 模糊滤镜*/animation: animate 2.5s linear infinite; /* 动画：动画名称 动画时长 线性的 无限次播放*/}/* 为每一个span元素设置动画延迟时间*/span:nth-child(1) {animation-delay: 0s;}span:nth-child(2) {animation-delay: 0.25s;}span:nth-child(3) {animation-delay: 0.5s;}span:nth-child(4) {animation-delay: 0.75s;}span:nth-child(5) {animation-delay: 1s;}span:nth-child(6) {animation-delay: 1.25s;}span:nth-child(7) {animation-delay: 1.5s;}span:nth-child(8) {animation-delay: 1.75s;}span:nth-child(9) {animation-delay: 2s;}@keyframes animate {/* 定义动画关键帧*/0%,100% {color: #fff;filter: blur(2px); /*模糊滤镜*/text-shadow: 0 0 10px #32ff7e, 0 0 20px #32ff7e, 0 0 30px #32ff7e,0 0 40px #32ff7e, 0 0 100px #32ff7e, 0 0 200px #32ff7e;}5%,95% {color: #111;filter: blur(0px);}}
接下来小编附上URL：
https://static-f758fb91-f450-4acc-879e-/
ps: 访问速度可能有点小慢，希望朋友们稍稍等待一小会儿，小编太穷了，资金不支持，只能用免费的服务器上传。
