一、CSS字体发光效果：

CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果

1、text-shadow：该属性为文本添加阴影效果。

text-shadow: h-shadow v-shadow blur color;

2、参数：

3、说明：
1、乍一看，text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果，其实不然，这正是 text-shadow 属性的精妙之处。
2、当阴影的水平偏移量 和 垂直偏移量都为0时，阴影就和文本重合了，这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。
3、当然，为了使外发光更加炫酷，还需要使用到text-shadow 的另一个特性：同时设置多个阴影（使用逗号分隔设置多个阴影）。

4、例子：比如我们想设置一个静态的文字发光效果：

html代码：（我们声明一个div，然后添加文本）

<div>我会发光</div>

css样式：（为了方便看，设置黑色背景，白色文字，然后让它居中显示）

div{
		height : 600px;			//设置一个高
		line-height : 600px;	//设置行高（垂直居中）
		background-color:black;	//黑色背景：黑
		font-size: 120px;		//字体120像素
		color : white;			//字体颜色：白
		text-align: center;		//水平居中
		text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	//设置发光效果
	}

看下效果：

text-shadow 的 blur 属性测试：
我们上面添加的属性值为：text-shadow：0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;可以看出我们在text-shadow后面添加了四个属性值，-或许你直接看看不出效果，我们尝试一个一个添加试试：

效果：（图一）

效果：（图二）

效果：（图三）

效果：（图四）

如果我们只添加一个阴影的话颜色会非常的浅，我们通过添加四个阴影来实现发光效果，而我们怎么证实是添加了多个阴影呢？
我们为每个阴影逐级添加10px的偏移量，然后将模糊面积设置为0就可以很明显的看清楚了：

text-shadow: 0 10px 0px red,0 20px 0 red,0 30px 0 red,0 40px 0 red;

看图：（明显的看到了四个阴影）

实际看需求自行添加多少个阴影和每个阴影的阴影面积自己定义，还有颜色也可以自己混合着用。（下面多换几个颜色试试）

text-shadow: 0 0 5px white,0 0 10px #00FFFF,0 0 15px #7FFF00,0 0 20px white;

二、CSS字体动态发光效果：

网上有很多的动态效果，我们其实都可以通过CSS发光字体来实现，我们首先看一下效果：图片来源

下面我们也实现一个动态的发光的例子，我们还是和上面一样添加div，然后设置样式：

html代码：

<div>我会发光</div>

css样式：（这是上面的静态发光样式）

div{
		height : 600px;			//设置一个高
		line-height : 600px;	//设置行高（垂直居中）
		background-color:black;	//黑色背景：黑
		font-size: 120px;		//字体120像素
		color : white;			//字体颜色：白
		text-align: center;		//水平居中
		text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	//设置发光效果
	}

我们实现当鼠标悬停div上面的时候来让字体来动态发光：

实现思路：我们给div添加一个鼠标悬停事件，然后通过CSS3的animation动画属性，来实现动态效果即可，如果对animation不是特别熟悉的话可以去学习学习。

1、在上面css效果的基础上先添加一个悬停事件：

设置animation属性时需要注意的是：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

div:hover{	//为了兼容不同的浏览器，所以声明两个
	-webkit-animation: Glow 0.5s ease infinite alternate;	//兼容Chrome
    animation: Glow 0.5s ease infinite alternate;
}

然后为其添加阴影效果（为了兼容也是写两个）

@-webkit-keyframes Glow {	//兼容Chrome 和 Safari
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}

见效果：当鼠标悬停到上面的时候会出现我们设置的动态发光字体，我们设置的0.5s内变换字体的阴影，时间和颜色变化可以自行定义。

好，把上面学会了基本可以实现所有的需求了，知识学会了，别忘了点个赞哦，谢谢！