【css3效果】用css3绘制发光字

CSS3绘制的文字经过发光效果。主要使用的属性：transition、text-shadow。
演示地址请点这里,代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE>
<html>
<head>
<title>css3效果-css3发光字</title>
<style>
body{
	background:#000;
	text-align:center;
	margin:0;
}
h1{
	margin: 0;
	color: #ffffff;
	transition: all .5s;
	font-size:900%;
}
h1:hover{
letter-spacing: 100px;
font-size:1200%;
color: #ffffff;;
text-shadow: 0 0 5px #fff, 
0 0 10px #fff,
0 0 15px #fff, 
0 0 20px #FF9900, 
0 0 35px #FF9900, 
0 0 40px #FF9900, 
0 0 50px #FF9900, 
0 0 75px #FF9900;}
h1 .line{
margin:50px auto 0;
transition: all 1s;
width:0;
height:8px;
border-radius:4px;
background:#fff;}
h1:hover .line{
width:100%;
}
</style>
</head>
<body>
<h1>Doterlin<div class="line"></div></h1>
</body>
</html>


欢迎大家转载，请注明出处：
Doterlin's Blog https://doterlin.github.io/blog/2016/05/27/01/

">