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

巴特西

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

代码实例

HTML

CSS

效果示图

最新文章

热门文章