CSS -- text-shadow 实现字体发光效果

1、CSS字体发光效果：

CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果
1、text-shadow：该属性为文本添加阴影效果。
text-shadow: h-shadow v-shadow blur color;

2、参数说明：

参数名称	说明
h-shadow	水平阴影的位置（阴影水平偏移量），可为负值，必需
v-shadow	垂直阴影的位置（阴影垂直偏移量），可为负值，必需
blur	阴影模糊的距离（默认为0），可选
color	阴影颜色（默认为当前字体颜色），可选

3、说明：

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

<span>88.88</span>

span{
	font-size: 22px;
	text-shadow: 0px 0px 9px #159AFF;
	font-weight: 600;
}

<div class="whfg">我会发光</div>

.whfg {
		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; //设置发光效果
	}

	.whfg: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;
	    }
	}
	

会闪烁