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

HTML代码

XML/HTML Code 复制内容到剪贴板 <div id="container">         < p > < a   href = "#" >        RED       </ a > </ p >          < p > < a   href = "#" >        BLUE       </ a > </ p >          < p > < a   href = "#" >        Yellow       </ a > </ p >          < p > < a   href = "#" >        GREEN       </ a > </ p >          < p > < a   href = "#" >        ORANGE       </ a > </ p >          < p > < a   href = "#" >        VIOLET       </ a > </ p >       </ div >      

CSS代码

CSS Code 复制内容到剪贴板 /*setup*/   *{       margin : 0;       padding : 0;    }       @ font -face {       font-family :  'Monoton' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Monoton' ),  local ( 'Monoton-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff)  format ( 'woff' );    }       @ font -face {       font-family :  'Iceland' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Iceland' ),  local ( 'Iceland-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/iceland/v3/F6LYTZLHrG9BNYXRjU7RSw.woff)  format ( 'woff' );    }       @ font -face {       font-family :  'Pacifico' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Pacifico Regular' ),  local ( 'Pacifico-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/pacifico/v5/yunJt0R8tCvMyj_V4xSjafesZW2xOQ-xsNqO47m55DA.woff)  format ( 'woff' );    }       @ font -face {       font-family :  'PressStart' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Press Start 2P' ),  local ( 'PressStart2P-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/pressstart2p/v2/8Lg6LX8-ntOHUQnvQ0E7o3dD2UuwsmbX3BOp4SL_VwM.woff)  format ( 'woff' );    }       @ font -face {       font-family :  'Audiowide' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Audiowide' ),  local ( 'Audiowide-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/audiowide/v2/8XtYtNKEyyZh481XVWfVOj8E0i7KZn-EPnyo3HZu7kw.woff)  format ( 'woff' );    }       @ font -face {       font-family :  'Vampiro One' ;       font-style :  normal ;       font-weight : 400;       src :  local ( 'Vampiro One' ),  local ( 'VampiroOne-Regular' ),  url (http://themes.googleusercontent.com/ static /fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff)  format ( 'woff' );    }       body{       background-color :  #222222 ;    }       #contai ner{          margin : auto ;    }       /*neeeeoooon*/    p{       text-align : center ;       font-size :7em;       margin : 20px  0  20px  0;     }       a{       text-decoration : none ;       -webkit-transition:  all  0.5s;      -moz-transition:  all  0.5s;      transition:  all  0.5s;    }       p:nth-child(1) a{       color : #FF1177 ;       font-family :Monoton;    }    p:nth-child(1) a:hover{      -webkit-animation: neon1 1.5s ease-in-out infinite alternate;      -moz-animation: neon1 1.5s ease-in-out infinite alternate;      animation: neon1 1.5s ease-in-out infinite alternate;     }       p:nth-child(2) a{       font-size :1.5em;       color : #228DFF ;       font-family :Iceland;    }    p:nth-child(2) a:hover{      -webkit-animation: neon2 1.5s ease-in-out infinite alternate;      -moz-animation: neon2 1.5s ease-in-out infinite alternate;      animation: neon2 1.5s ease-in-out infinite alternate;    }       p:nth-child(3) a{       color : #FFDD1B ;       font-family :Pacifico;    }    p:nth-child(3) a:hover{       -webkit-animation: neon3 1.5s ease-in-out infinite alternate;      -moz-animation: neon3 1.5s ease-in-out infinite alternate;      animation: neon3 1.5s ease-in-out infinite alternate;     }       p:nth-child(4) a{       color : #B6FF00 ;       font-family :PressStart;       font-size :0.8em;    }    p:nth-child(4) a:hover{      -webkit-animation: neon4 1.5s ease-in-out infinite alternate;      -moz-animation: neon4 1.5s ease-in-out infinite alternate;      animation: neon4 1.5s ease-in-out infinite alternate;    }       p:nth-child(5) a{       color : #FF9900 ;       font-family :Audiowide;    }    p:nth-child(5) a:hover{      -webkit-animation: neon5 1.5s ease-in-out infinite alternate;      -moz-animation: neon5 1.5s ease-in-out infinite alternate;      animation: neon5 1.5s ease-in-out infinite alternate;     }       p:nth-child(6) a{       color : #BA01FF ;       font-family :Vampiro One;    }    p:nth-child(6) a:hover{      -webkit-animation: neon6 1.5s ease-in-out infinite alternate;      -moz-animation: neon6 1.5s ease-in-out infinite alternate;      animation: neon6 1.5s ease-in-out infinite alternate;    }       p a:hover{    color : #ffffff ;      }       /*glow for webkit*/    @-webkit-keyframes neon1 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #FF1177 ,                   0 0  70px    #FF1177 ,                   0 0  80px    #FF1177 ,                   0 0  100px   #FF1177 ,                   0 0  150px   #FF1177 ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #FF1177 ,                   0 0  35px   #FF1177 ,                   0 0  40px   #FF1177 ,                   0 0  50px   #FF1177 ,                   0 0  75px   #FF1177 ;      }    }       @-webkit-keyframes neon2 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #228DFF ,                   0 0  70px    #228DFF ,                   0 0  80px    #228DFF ,                   0 0  100px   #228DFF ,                   0 0  150px   #228DFF ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #228DFF ,                   0 0  35px   #228DFF ,                   0 0  40px   #228DFF ,                   0 0  50px   #228DFF ,                   0 0  75px   #228DFF ;      }    }       @-webkit-keyframes neon3 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #FFDD1B ,                   0 0  70px    #FFDD1B ,                   0 0  80px    #FFDD1B ,                   0 0  100px   #FFDD1B ,                   0 0  150px   #FFDD1B ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #FFDD1B ,                   0 0  35px   #FFDD1B ,                   0 0  40px   #FFDD1B ,                   0 0  50px   #FFDD1B ,                   0 0  75px   #FFDD1B ;      }    }       @-webkit-keyframes neon4 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #B6FF00 ,                   0 0  70px    #B6FF00 ,                   0 0  80px    #B6FF00 ,                   0 0  100px   #B6FF00 ,                   0 0  150px   #B6FF00 ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #B6FF00 ,                   0 0  35px   #B6FF00 ,                   0 0  40px   #B6FF00 ,                   0 0  50px   #B6FF00 ,                   0 0  75px   #B6FF00 ;      }    }       @-webkit-keyframes neon5 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #FF9900 ,                   0 0  70px    #FF9900 ,                   0 0  80px    #FF9900 ,                   0 0  100px   #FF9900 ,                   0 0  150px   #FF9900 ;      }      to {         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 ;      }    }       @-webkit-keyframes neon6 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px   #fff ,                   0 0  30px   #fff ,                   0 0  40px   #ff00de ,                   0 0  70px   #ff00de ,                   0 0  80px   #ff00de ,                   0 0  100px   #ff00de ,                   0 0  150px   #ff00de ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #ff00de ,                   0 0  35px   #ff00de ,                   0 0  40px   #ff00de ,                   0 0  50px   #ff00de ,                   0 0  75px   #ff00de ;      }    }       /*glow for mozilla*/    @-moz-keyframes neon1 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #FF1177 ,                   0 0  70px    #FF1177 ,                   0 0  80px    #FF1177 ,                   0 0  100px   #FF1177 ,                   0 0  150px   #FF1177 ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #FF1177 ,                   0 0  35px   #FF1177 ,                   0 0  40px   #FF1177 ,                   0 0  50px   #FF1177 ,                   0 0  75px   #FF1177 ;      }    }       @-moz-keyframes neon2 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #228DFF ,                   0 0  70px    #228DFF ,                   0 0  80px    #228DFF ,                   0 0  100px   #228DFF ,                   0 0  150px   #228DFF ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #228DFF ,                   0 0  35px   #228DFF ,                   0 0  40px   #228DFF ,                   0 0  50px   #228DFF ,                   0 0  75px   #228DFF ;      }    }       @-moz-keyframes neon3 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #FFDD1B ,                   0 0  70px    #FFDD1B ,                   0 0  80px    #FFDD1B ,                   0 0  100px   #FFDD1B ,                   0 0  150px   #FFDD1B ;      }      to {         text-shadow : 0 0  5px   #fff ,                   0 0  10px   #fff ,                   0 0  15px   #fff ,                   0 0  20px   #FFDD1B ,                   0 0  35px   #FFDD1B ,                   0 0  40px   #FFDD1B ,                   0 0  50px   #FFDD1B ,                   0 0  75px   #FFDD1B ;      }    }       @-moz-keyframes neon4 {      from {         text-shadow : 0 0  10px   #fff ,                   0 0  20px    #fff ,                   0 0  30px    #fff ,                   0 0  40px    #B6FF00 ,                   0 0  70px    #B6FF00 ,                   0 0  80px    #B6FF00 ,                   0 0  100px   #B6FF00 ,                   0 0  150px   #B6FF00 ;      }