zoukankan      html  css  js  c++  java
  • 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

    效果示图

  • 相关阅读:
    Python: 编程遇到的一些问题以及网上解决办法?
    Python: Win7下使用 pip install lxml 无法安装lxml?
    Python:Pycharm下无法导入安装好的第三方模块?
    Python:如何删除文件中的空白行?
    Pycharm 快捷键
    Python读取二进制文件
    python实现grep
    Python学习笔记
    VBA批量查找和复制文件
    %~dp0是什么意思
  • 原文地址:https://www.cnblogs.com/ypppt/p/13113980.html
Copyright © 2011-2022 走看看