案例分析：
    实现扫光实际上就是给文字添加一个可以移动的背景块(文本背景)，根据光束移动由强到弱的特性(可以理解为手电筒光照射时的左右移动) 因此设置渐变效果。

    第一步: 实现背景块

    1. /* 默认背景黑色
    2.      从左往右产生黑白渐变效果
    3.    背景不重复,位于左上角
    4.      背景大小80x80 (扫光背景块) */
    5. background: #000 -webkit-linear-gradient(left,#000,#fff) no-repeat 0 0;
    6. background-size: 80px;

    第二步: 把背景块作用到文字上面

    1. -webkit-background-clip: text;
    2. /* 填充文本颜色 */
    3. -webkit-text-fll-color: rgba(255,255,255,.3);

    第三步: 动画循环

    1. @-webkit-keyframes slideShine {
    2.   form {
    3.       background-position: 0 0;
    4.   }
    5.   to {
    6.       background-position: 100% 100%;
    7.   }
    8. }

    整体代码：

    1. <style>
    2.       .bg {
    3.         width: 1000px;
    4.         height: 300px;
    5.         margin: 0 auto;
    6.         background: #000;
    7.       }
    9.       .slideShine {
    10.         width: 1000px;
    11.         background: #111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
    12.         background-size: 80px;
    13.         font: 60px "Microsoft YaHei";
    14.         text-align: center;
    15.         line-height: 300px;
    16.         -webkit-background-clip: text;
    17.         -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
    18.         animation: slideShine 3s infinite;
    19.       }
    21.       @-webkit-keyframes slideShine {
    22.         0% {
    23.           background-position: 0 0;
    24.         }
    25.         100% {
    26.           background-position: 100% 100%;
    27.         }
    28.       }
    29.     </style>
    <div class="bg">
      <p class="slideShine">Welcome to Asher's Blog</p>
</div>