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


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

    代码实例

    HTML

    1 <div>
    2     <p>xinpureZhu</p>
    3 </div>

    CSS

     1 body {
     2     background: #000;
     3 }
     4 .container {
     5      600px;
     6     margin: 100px auto 0;
     7 }
     8 p {
     9     font-family: 'Audiowide';
    10     text-align: center;
    11     color: #00a67c;
    12     font-size: 7em;
    13     -webkit-transition: all 1.5s ease;
    14             transition: all 1.5s ease;
    15 }
    16 p:hover {
    17     color: #fff;
    18     -webkit-animation: Glow 1.5s ease infinite alternate;
    19             animation: Glow 1.5s ease infinite alternate;
    20 
    21 }
    22 @-webkit-keyframes Glow {
    23     from {
    24         text-shadow: 0 0 10px #fff,
    25                      0 0 20px #fff,
    26                      0 0 30px #fff,
    27                      0 0 40px #00a67c,
    28                      0 0 70px #00a67c,
    29                      0 0 80px #00a67c,
    30                      0 0 100px #00a67c,
    31                      0 0 150px #00a67c;
    32     }
    33     to {
    34         text-shadow: 0 0 5px #fff,
    35                      0 0 10px #fff,
    36                      0 0 15px #fff,
    37                      0 0 20px #00a67c,
    38                      0 0 35px #00a67c,
    39                      0 0 40px #00a67c,
    40                      0 0 50px #00a67c,
    41                      0 0 75px #00a67c;
    42     }
    43 }
    44 @keyframes Glow {
    45     from {
    46         text-shadow: 0 0 10px #fff,
    47                      0 0 20px #fff,
    48                      0 0 30px #fff,
    49                      0 0 40px #00a67c,
    50                      0 0 70px #00a67c,
    51                      0 0 80px #00a67c,
    52                      0 0 100px #00a67c,
    53                      0 0 150px #00a67c;
    54     }
    55     to {
    56         text-shadow: 0 0 5px #fff,
    57                      0 0 10px #fff,
    58                      0 0 15px #fff,
    59                      0 0 20px #00a67c,
    60                      0 0 35px #00a67c,
    61                      0 0 40px #00a67c,
    62                      0 0 50px #00a67c,
    63                      0 0 75px #00a67c;
    64     }
    65 }

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

    效果示图

  • 相关阅读:
    netstat
    Android总结篇——Intent机制详解及示例总结
    Android系统介绍与框架
    三个绘图工具类详解
    Android 调用 WebService
    Android JSON数据解析
    Android 总结:ContentProvider 的使用
    Android Service完全解析,关于服务你所需知道的一切(下)
    Android Service完全解析,关于服务你所需知道的一切(上)
    Activity的四种加载模式详解:
  • 原文地址:https://www.cnblogs.com/ypppt/p/13113980.html
走看看 - 开发者的网上家园