CSS3制作炫酷的自定义发光文字

本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。

HTML代码

1. <div id="container">  
2.   
3.   <p><a href="#">  
4.     RED   
5.   </a></p>  
6.   
7.   <p><a href="#">  
8.     BLUE   
9.   </a></p>  
10.   
11.   <p><a href="#">  
12.     Yellow   
13.   </a></p>  
14.   
15.   <p><a href="#">  
16.     GREEN   
17.   </a></p>  
18.   
19.   <p><a href="#">  
20.     ORANGE   
21.   </a></p>  
22.   
23.   <p><a href="#">  
24.     VIOLET   
25.   </a></p>  
26.   
27. </div>  
28.   

CSS代码

1. /*setup*/  
2. *{   
3.   margin: 0;   
4.   padding: 0;   
5. }   
6.   
7. @font-face {   
8.   font-family: 'Monoton';   
9.   font-style: normal;   
10.   font-weight: 400;   
11.   src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');   
12. }   
13.   
14. @font-face {   
15.   font-family: 'Iceland';   
16.   font-style: normal;   
17.   font-weight: 400;   
18.   src: local('Iceland'), local('Iceland-Regular'), url(http://themes.googleusercontent.com/static/fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff) format('woff');   
19. }   
20.   
21. @font-face {   
22.   font-family: 'Pacifico';   
23.   font-style: normal;   
24.   font-weight: 400;   
25.   src: local('Pacifico Regular'), local('Pacifico-Regular'), url(http://themes.googleusercontent.com/static/fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff) format('woff');   
26. }   
27.   
28. @font-face {   
29.   font-family: 'PressStart';   
30.   font-style: normal;   
31.   font-weight: 400;   
32.   src: local('Press Start 2P'), local('PressStart2P-Regular'), url(http://themes.googleusercontent.com/static/fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff) format('woff');   
33. }   
34.   
35. @font-face {   
36.   font-family: 'Audiowide';   
37.   font-style: normal;   
38.   font-weight: 400;   
39.   src: local('Audiowide'), local('Audiowide-Regular'), url(http://themes.googleusercontent.com/static/fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');   
40. }   
41.   
42. @font-face {   
43.   font-family: 'Vampiro One';   
44.   font-style: normal;   
45.   font-weight: 400;   
46.   src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');   
47. }   
48.   
49. body{   
50.   background-color: #222222;   
51. }   
52.   
53. #container{   
54.   
55.   margin:auto;   
56. }   
57.   
58. /*neeeeoooon*/  
59. p{   
60.   text-align:center;   
61.   font-size:7em;   
62.   margin:20px 0 20px 0;    
63. }   
64.   
65. a{   
66.   text-decoration:none;    
67.   -webkit-transition: all 0.5s;   
68.   -moz-transition: all 0.5s;   
69.   transition: all 0.5s;   
70. }   
71.   
72. p:nth-child(1) a{   
73.   color:#FF1177;   
74.   font-family:Monoton;   
75. }   
76. p:nth-child(1) a:hover{   
77.   -webkit-animation: neon1 1.5s ease-in-out infinite alternate;   
78.   -moz-animation: neon1 1.5s ease-in-out infinite alternate;   
79.   animation: neon1 1.5s ease-in-out infinite alternate;    
80. }   
81.   
82. p:nth-child(2) a{   
83.   font-size:1.5em;   
84.   color:#228DFF;   
85.   font-family:Iceland;   
86. }   
87. p:nth-child(2) a:hover{   
88.   -webkit-animation: neon2 1.5s ease-in-out infinite alternate;   
89.   -moz-animation: neon2 1.5s ease-in-out infinite alternate;   
90.   animation: neon2 1.5s ease-in-out infinite alternate;   
91. }   
92.   
93. p:nth-child(3) a{   
94.   color:#FFDD1B;   
95.   font-family:Pacifico;   
96. }   
97. p:nth-child(3) a:hover{    
98.   -webkit-animation: neon3 1.5s ease-in-out infinite alternate;   
99.   -moz-animation: neon3 1.5s ease-in-out infinite alternate;   
100.   animation: neon3 1.5s ease-in-out infinite alternate;    
101. }   
102.   
103. p:nth-child(4) a{   
104.   color:#B6FF00;   
105.   font-family:PressStart;   
106.   font-size:0.8em;   
107. }   
108. p:nth-child(4) a:hover{   
109.   -webkit-animation: neon4 1.5s ease-in-out infinite alternate;   
110.   -moz-animation: neon4 1.5s ease-in-out infinite alternate;   
111.   animation: neon4 1.5s ease-in-out infinite alternate;   
112. }   
113.   
114. p:nth-child(5) a{   
115.   color:#FF9900;   
116.   font-family:Audiowide;   
117. }   
118. p:nth-child(5) a:hover{   
119.   -webkit-animation: neon5 1.5s ease-in-out infinite alternate;   
120.   -moz-animation: neon5 1.5s ease-in-out infinite alternate;   
121.   animation: neon5 1.5s ease-in-out infinite alternate;    
122. }   
123.   
124. p:nth-child(6) a{   
125.   color:#BA01FF;   
126.   font-family:Vampiro One;   
127. }   
128. p:nth-child(6) a:hover{   
129.   -webkit-animation: neon6 1.5s ease-in-out infinite alternate;   
130.   -moz-animation: neon6 1.5s ease-in-out infinite alternate;   
131.   animation: neon6 1.5s ease-in-out infinite alternate;   
132. }   
133.   
134. p a:hover{   
135. color:#ffffff;     
136. }   
137.   
138. /*glow for webkit*/  
139. @-webkit-keyframes neon1 {   
140.   from {   
141.     text-shadow: 0 0 10px #fff,   
142.                0 0 20px  #fff,   
143.                0 0 30px  #fff,   
144.                0 0 40px  #FF1177,   
145.                0 0 70px  #FF1177,   
146.                0 0 80px  #FF1177,   
147.                0 0 100px #FF1177,   
148.                0 0 150px #FF1177;   
149.   }   
150.   to {   
151.     text-shadow: 0 0 5px #fff,   
152.                0 0 10px #fff,   
153.                0 0 15px #fff,   
154.                0 0 20px #FF1177,   
155.                0 0 35px #FF1177,   
156.                0 0 40px #FF1177,   
157.                0 0 50px #FF1177,   
158.                0 0 75px #FF1177;   
159.   }   
160. }   
161.   
162. @-webkit-keyframes neon2 {   
163.   from {   
164.     text-shadow: 0 0 10px #fff,   
165.                0 0 20px  #fff,   
166.                0 0 30px  #fff,   
167.                0 0 40px  #228DFF,   
168.                0 0 70px  #228DFF,   
169.                0 0 80px  #228DFF,   
170.                0 0 100px #228DFF,   
171.                0 0 150px #228DFF;   
172.   }   
173.   to {   
174.     text-shadow: 0 0 5px #fff,   
175.                0 0 10px #fff,   
176.                0 0 15px #fff,   
177.                0 0 20px #228DFF,   
178.                0 0 35px #228DFF,   
179.                0 0 40px #228DFF,   
180.                0 0 50px #228DFF,   
181.                0 0 75px #228DFF;   
182.   }   
183. }   
184.   
185. @-webkit-keyframes neon3 {   
186.   from {   
187.     text-shadow: 0 0 10px #fff,   
188.                0 0 20px  #fff,   
189.                0 0 30px  #fff,   
190.                0 0 40px  #FFDD1B,   
191.                0 0 70px  #FFDD1B,   
192.                0 0 80px  #FFDD1B,   
193.                0 0 100px #FFDD1B,   
194.                0 0 150px #FFDD1B;   
195.   }   
196.   to {   
197.     text-shadow: 0 0 5px #fff,   
198.                0 0 10px #fff,   
199.                0 0 15px #fff,   
200.                0 0 20px #FFDD1B,   
201.                0 0 35px #FFDD1B,   
202.                0 0 40px #FFDD1B,   
203.                0 0 50px #FFDD1B,   
204.                0 0 75px #FFDD1B;   
205.   }   
206. }   
207.   
208. @-webkit-keyframes neon4 {   
209.   from {   
210.     text-shadow: 0 0 10px #fff,   
211.                0 0 20px  #fff,   
212.                0 0 30px  #fff,   
213.                0 0 40px  #B6FF00,   
214.                0 0 70px  #B6FF00,   
215.                0 0 80px  #B6FF00,   
216.                0 0 100px #B6FF00,   
217.                0 0 150px #B6FF00;   
218.   }   
219.   to {   
220.     text-shadow: 0 0 5px #fff,   
221.                0 0 10px #fff,   
222.                0 0 15px #fff,   
223.                0 0 20px #B6FF00,   
224.                0 0 35px #B6FF00,   
225.                0 0 40px #B6FF00,   
226.                0 0 50px #B6FF00,   
227.                0 0 75px #B6FF00;   
228.   }   
229. }   
230.   
231. @-webkit-keyframes neon5 {   
232.   from {   
233.     text-shadow: 0 0 10px #fff,   
234.                0 0 20px  #fff,   
235.                0 0 30px  #fff,   
236.                0 0 40px  #FF9900,   
237.                0 0 70px  #FF9900,   
238.                0 0 80px  #FF9900,   
239.                0 0 100px #FF9900,   
240.                0 0 150px #FF9900;   
241.   }   
242.   to {   
243.     text-shadow: 0 0 5px #fff,   
244.                0 0 10px #fff,   
245.                0 0 15px #fff,   
246.                0 0 20px #FF9900,   
247.                0 0 35px #FF9900,   
248.                0 0 40px #FF9900,   
249.                0 0 50px #FF9900,   
250.                0 0 75px #FF9900;   
251.   }   
252. }   
253.   
254. @-webkit-keyframes neon6 {   
255.   from {   
256.     text-shadow: 0 0 10px #fff,   
257.                0 0 20px #fff,   
258.                0 0 30px #fff,   
259.                0 0 40px #ff00de,   
260.                0 0 70px #ff00de,   
261.                0 0 80px #ff00de,   
262.                0 0 100px #ff00de,   
263.                0 0 150px #ff00de;   
264.   }   
265.   to {   
266.     text-shadow: 0 0 5px #fff,   
267.                0 0 10px #fff,   
268.                0 0 15px #fff,   
269.                0 0 20px #ff00de,   
270.                0 0 35px #ff00de,   
271.                0 0 40px #ff00de,   
272.                0 0 50px #ff00de,   
273.                0 0 75px #ff00de;   
274.   }   
275. }   
276.   
277. /*glow for mozilla*/  
278. @-moz-keyframes neon1 {   
279.   from {   
280.     text-shadow: 0 0 10px #fff,   
281.                0 0 20px  #fff,   
282.                0 0 30px  #fff,   
283.                0 0 40px  #FF1177,   
284.                0 0 70px  #FF1177,   
285.                0 0 80px  #FF1177,   
286.                0 0 100px #FF1177,   
287.                0 0 150px #FF1177;   
288.   }   
289.   to {   
290.     text-shadow: 0 0 5px #fff,   
291.                0 0 10px #fff,   
292.                0 0 15px #fff,   
293.                0 0 20px #FF1177,   
294.                0 0 35px #FF1177,   
295.                0 0 40px #FF1177,   
296.                0 0 50px #FF1177,   
297.                0 0 75px #FF1177;   
298.   }   
299. }   
300.   
301. @-moz-keyframes neon2 {   
302.   from {   
303.     text-shadow: 0 0 10px #fff,   
304.                0 0 20px  #fff,   
305.                0 0 30px  #fff,   
306.                0 0 40px  #228DFF,   
307.                0 0 70px  #228DFF,   
308.                0 0 80px  #228DFF,   
309.                0 0 100px #228DFF,   
310.                0 0 150px #228DFF;   
311.   }   
312.   to {   
313.     text-shadow: 0 0 5px #fff,   
314.                0 0 10px #fff,   
315.                0 0 15px #fff,   
316.                0 0 20px #228DFF,   
317.                0 0 35px #228DFF,   
318.                0 0 40px #228DFF,   
319.                0 0 50px #228DFF,   
320.                0 0 75px #228DFF;   
321.   }   
322. }   
323.   
324. @-moz-keyframes neon3 {   
325.   from {   
326.     text-shadow: 0 0 10px #fff,   
327.                0 0 20px  #fff,   
328.                0 0 30px  #fff,   
329.                0 0 40px  #FFDD1B,   
330.                0 0 70px  #FFDD1B,   
331.                0 0 80px  #FFDD1B,   
332.                0 0 100px #FFDD1B,   
333.                0 0 150px #FFDD1B;   
334.   }   
335.   to {   
336.     text-shadow: 0 0 5px #fff,   
337.                0 0 10px #fff,   
338.                0 0 15px #fff,   
339.                0 0 20px #FFDD1B,   
340.                0 0 35px #FFDD1B,   
341.                0 0 40px #FFDD1B,   
342.                0 0 50px #FFDD1B,   
343.                0 0 75px #FFDD1B;   
344.   }   
345. }   
346.   
347. @-moz-keyframes neon4 {   
348.   from {   
349.     text-shadow: 0 0 10px #fff,   
350.                0 0 20px  #fff,   
351.                0 0 30px  #fff,   
352.                0 0 40px  #B6FF00,   
353.                0 0 70px  #B6FF00,   
354.                0 0 80px  #B6FF00,   
355.                0 0 100px #B6FF00,   
356.                0 0 150px #B6FF00;   
357.   }   
358.   to {   
359.     text-shadow: 0 0 5px #fff,   
360.                0 0 10px #fff,   
361.                0 0 15px #fff,   
362.                0 0 20px #B6FF00,   
363.                0 0 35px #B6FF00,   
364.                0 0 40px #B6FF00,   
365.                0 0 50px #B6FF00,   
366.                0 0 75px #B6FF00;   
367.   }   
368. }   
369.   
370. @-moz-keyframes neon5 {   
371.   from {   
372.     text-shadow: 0 0 10px #fff,   
373.                0 0 20px  #fff,   
374.                0 0 30px  #fff,   
375.                0 0 40px  #FF9900,   
376.                0 0 70px  #FF9900,   
377.                0 0 80px  #FF9900,   
378.                0 0 100px #FF9900,   
379.                0 0 150px #FF9900;   
380.   }   
381.   to {   
382.     text-shadow: 0 0 5px #fff,   
383.                0 0 10px #fff,   
384.                0 0 15px #fff,   
385.                0 0 20px #FF9900,   
386.                0 0 35px #FF9900,   
387.                0 0 40px #FF9900,   
388.                0 0 50px #FF9900,   
389.                0 0 75px #FF9900;   
390.   }   
391. }   
392.   
393. @-moz-keyframes neon6 {   
394.   from {   
395.     text-shadow: 0 0 10px #fff,   
396.                0 0 20px #fff,   
397.                0 0 30px #fff,   
398.                0 0 40px #ff00de,   
399.                0 0 70px #ff00de,   
400.                0 0 80px #ff00de,   
401.                0 0 100px #ff00de,   
402.                0 0 150px #ff00de;   
403.   }   
404.   to {   
405.     text-shadow: 0 0 5px #fff,   
406.                0 0 10px #fff,   
407.                0 0 15px #fff,   
408.                0 0 20px #ff00de,   
409.                0 0 35px #ff00de,   
410.                0 0 40px #ff00de,   
411.                0 0 50px #ff00de,   
412.                0 0 75px #ff00de;   
413.   }   
414. }   
415.   
416. /*glow*/  
417. @keyframes neon1 {   
418.   from {   
419.     text-shadow: 0 0 10px #fff,   
420.                0 0 20px  #fff,   
421.                0 0 30px  #fff,   
422.                0 0 40px  #FF1177,   
423.                0 0 70px  #FF1177,   
424.                0 0 80px  #FF1177,   
425.                0 0 100px #FF1177,   
426.                0 0 150px #FF1177;   
427.   }   
428.   to {   
429.     text-shadow: 0 0 5px #fff,   
430.                0 0 10px #fff,   
431.                0 0 15px #fff,   
432.                0 0 20px #FF1177,   
433.                0 0 35px #FF1177,   
434.                0 0 40px #FF1177,   
435.                0 0 50px #FF1177,   
436.                0 0 75px #FF1177;   
437.   }   
438. }   
439.   
440. @keyframes neon2 {   
441.   from {   
442.     text-shadow: 0 0 10px #fff,   
443.                0 0 20px  #fff,   
444.                0 0 30px  #fff,   
445.                0 0 40px  #228DFF,   
446.                0 0 70px  #228DFF,   
447.                0 0 80px  #228DFF,   
448.                0 0 100px #228DFF,   
449.                0 0 150px #228DFF;   
450.   }   
451.   to {   
452.     text-shadow: 0 0 5px #fff,   
453.                0 0 10px #fff,   
454.                0 0 15px #fff,   
455.                0 0 20px #228DFF,   
456.                0 0 35px #228DFF,   
457.                0 0 40px #228DFF,   
458.                0 0 50px #228DFF,   
459.                0 0 75px #228DFF;   
460.   }   
461. }   
462.   
463. @keyframes neon3 {   
464.   from {   
465.     text-shadow: 0 0 10px #fff,   
466.                0 0 20px  #fff,   
467.                0 0 30px  #fff,   
468.                0 0 40px  #FFDD1B,   
469.                0 0 70px  #FFDD1B,   
470.                0 0 80px  #FFDD1B,   
471.                0 0 100px #FFDD1B,   
472.                0 0 150px #FFDD1B;   
473.   }   
474.   to {   
475.     text-shadow: 0 0 5px #fff,   
476.                0 0 10px #fff,   
477.                0 0 15px #fff,   
478.                0 0 20px #FFDD1B,   
479.                0 0 35px #FFDD1B,   
480.                0 0 40px #FFDD1B,   
481.                0 0 50px #FFDD1B,   
482.                0 0 75px #FFDD1B;   
483.   }   
484. }   
485.   
486. @keyframes neon4 {   
487.   from {   
488.     text-shadow: 0 0 10px #fff,   
489.                0 0 20px  #fff,   
490.                0 0 30px  #fff,   
491.                0 0 40px  #B6FF00,   
492.                0 0 70px  #B6FF00,   
493.                0 0 80px  #B6FF00,   
494.                0 0 100px #B6FF00,   
495.                0 0 150px #B6FF00;   
496.   }   
497.   to {   
498.     text-shadow: 0 0 5px #fff,   
499.                0 0 10px #fff,   
500.                0 0 15px #fff,   
501.                0 0 20px #B6FF00,   
502.                0 0 35px #B6FF00,   
503.                0 0 40px #B6FF00,   
504.                0 0 50px #B6FF00,   
505.                0 0 75px #B6FF00;   
506.   }   
507. }   
508.   
509. @keyframes neon5 {   
510.   from {   
511.     text-shadow: 0 0 10px #fff,   
512.                0 0 20px  #fff,   
513.                0 0 30px  #fff,   
514.                0 0 40px  #FF9900,   
515.                0 0 70px  #FF9900,   
516.                0 0 80px  #FF9900,   
517.                0 0 100px #FF9900,   
518.                0 0 150px #FF9900;   
519.   }   
520.   to {   
521.     text-shadow: 0 0 5px #fff,   
522.                0 0 10px #fff,   
523.                0 0 15px #fff,   
524.                0 0 20px #FF9900,   
525.                0 0 35px #FF9900,   
526.                0 0 40px #FF9900,   
527.                0 0 50px #FF9900,   
528.                0 0 75px #FF9900;   
529.   }   
530. }   
531.   
532. @keyframes neon6 {   
533.   from {   
534.     text-shadow: 0 0 10px #fff,   
535.                0 0 20px #fff,   
536.                0 0 30px #fff,   
537.                0 0 40px #ff00de,   
538.                0 0 70px #ff00de,   
539.                0 0 80px #ff00de,   
540.                0 0 100px #ff00de,   
541.                0 0 150px #ff00de;   
542.   }   
543.   to {   
544.     text-shadow: 0 0 5px #fff,   
545.                0 0 10px #fff,   
546.                0 0 15px #fff,   
547.                0 0 20px #ff00de,   
548.                0 0 35px #ff00de,   
549.                0 0 40px #ff00de,   
550.                0 0 50px #ff00de,   
551.                0 0 75px #ff00de;   
552.   }   
553. }   
554.   
555. /*REEEEEEEEEEESPONSIVE*/  
556. @media (max-width: 650px) {   
557.   
558.   #container{   
559.     width: 100%;   
560.   }   
561.   
562.   p{   
563.     font-size:3.5em;   
564.   }   
565.   
566. }   

以上就是本文的全部内容，希望对大家的学习有所帮助。