CSS3样式_实现字体发光效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3样式_实现字体发光效果
text-shadow 属性仅仅是⽤来设置⽂本阴影的，似乎并不能实现字体发光效果。
其实不然，这正是 text-shadow 属性的精妙之处。
当阴影的⽔平偏移量和垂直偏移量都为0时，阴影就和⽂本重合了。
这时，如果增⼤阴影模糊的距离，就可以达到字体外发光的效果了。
当然，为了使外发光更加酷炫，还需要使⽤到 text-shadow 的另⼀个特性: 同时设置多个阴影(使⽤逗号分隔设置多个阴影)。
代码实例
HTML
1 <div>
2 <p>xinpureZhu</p>
3 </div>
CSS
1 body {
2 background: #000;
3 }
4 .container {
5 width: 600px;
6 margin: 100px auto 0;
7 }
8 p {
9 font-family: 'Audiowide';
10 text-align: center;
11 color: #00a67c;
12 font-size: 7em;
13 -webkit-transition: all 1.5s ease;
14 transition: all 1.5s ease;
15 }
16 p:hover {
17 color: #fff;
18 -webkit-animation: Glow 1.5s ease infinite alternate;
19 animation: Glow 1.5s ease infinite alternate;
20
21 }
22 @-webkit-keyframes Glow {
23from {
24 text-shadow: 00 10px #fff,
2500 20px #fff,
2600 30px #fff,
2700 40px #00a67c,
2800 70px #00a67c,
2900 80px #00a67c,
3000 100px #00a67c,
3100 150px #00a67c;
32 }
33 to {
34 text-shadow: 00 5px #fff,
3500 10px #fff,
3600 15px #fff,
3700 20px #00a67c,
3800 35px #00a67c,
3900 40px #00a67c,
4000 50px #00a67c,
4100 75px #00a67c;
42 }
43 }
44 @keyframes Glow {
45from {
46 text-shadow: 00 10px #fff,
4700 20px #fff,
4800 30px #fff,
4900 40px #00a67c,
5000 70px #00a67c,
5100 80px #00a67c,
5200 100px #00a67c,
5300 150px #00a67c;
54 }
55 to {
56 text-shadow: 00 5px #fff,
5700 10px #fff,
5800 15px #fff,
5900 20px #00a67c,
6000 35px #00a67c, 6100 40px #00a67c, 6200 50px #00a67c, 6300 75px #00a67c;
64 }
65 }
效果⽰图。