CSS实现字体发光效果text-shadow
⼀、CSS字体发光效果：
CSS3 并没有直接设置发光效果的属性，但是利⽤text-shadow属性实现此效果
1、text-shadow：该属性为⽂本添加阴影效果。
css特效文字
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 的另⼀个特性：同时设置多个阴影（使⽤逗号分隔设置多个阴影）。
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后⾯添加了四个属性值，-或许你直接看看不出效果，我们尝试⼀个⼀个添加试试：
从左到右添加的属性值
图1text-shadow：0 0 10px red;
图2text-shadow：0 0 10px red,0 0 20px red;
图3text-shadow：0 0 10px red,0 0 20px red,0 0 30px red;
图4text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;
效果：（图⼀）
效果：（图⼆）
效果：（图三）
效果：（图四）
如果我们只添加⼀个阴影的话颜⾊会⾮常的浅，我们通过添加四个阴影来实现发光效果，⽽我们怎么证实是添加了多个阴影呢？我们为每个阴影逐级添加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;
}
然后为其添加阴影效果（为了兼容也是写两个）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。