CSS3样式_实现字体发光效果

text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果。其实不然，这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时，阴影就和文本重合了。这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。当然，为了使外发光更加酷炫，还需要使用到 text-shadow 的另一个特性: 同时设置多个阴影(使用逗号分隔设置多个阴影)。

代码实例

HTML

 <div>
     <p>xinpureZhu</p>
 </div>

CSS

 body {
     background: #;
 }
 .container {
     width: 600px;
     margin: 100px auto ;
 }
 p {
     font-family: 'Audiowide';
     text-align: center;
     color: #00a67c;
     font-size: 7em;
     -webkit-transition: all .5s ease;
             transition: all .5s ease;
 }
 p:hover {
     color: #fff;
     -webkit-animation: Glow .5s ease infinite alternate;
             animation: Glow .5s ease infinite alternate;

 }
 @-webkit-keyframes Glow {
     from {
         text-shadow:   10px #fff,
                        20px #fff,
                        30px #fff,
                        40px #00a67c,
                        70px #00a67c,
                        80px #00a67c,
                        100px #00a67c,
                        150px #00a67c;
     }
     to {
         text-shadow:   5px #fff,
                        10px #fff,
                        15px #fff,
                        20px #00a67c,
                        35px #00a67c,
                        40px #00a67c,
                        50px #00a67c,
                        75px #00a67c;
     }
 }
 @keyframes Glow {
     from {
         text-shadow:   10px #fff,
                        20px #fff,
                        30px #fff,
                        40px #00a67c,
                        70px #00a67c,
                        80px #00a67c,
                        100px #00a67c,
                        150px #00a67c;
     }
     to {
         text-shadow:   5px #fff,
                        10px #fff,
                        15px #fff,
                        20px #00a67c,
                        35px #00a67c,
                        40px #00a67c,
                        50px #00a67c,
                        75px #00a67c;
     }
 }

设计导航https://www.wode007.com/favorites/sjdh

效果示图