CSS效果-文字扫光

在网页中给文字加上一个扫光效果，是不是让页面看起来非常的酷炫。这个效果实现起来也非常简单，这个效果是怎么实现的呢？让我们一步一步来揭秘它吧。

背景颜色扫光

首先我们先来认识一个css属性background-clip

MDN:
background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框下面。主要属性如下：
/* Keyword values /
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
/ Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

这里我们要用到background-clip:text属性

MDN:
背景被裁剪成文字的前景色。

文字填充text-fill-color

检索或设置对象中的文字填充颜色。
若同时设置text-fill-color和color，text-fill-color定义的颜色将覆盖color属性；通过text-fill-color属性，可以做出一些例如渐变文字和镂空文字的效果

接下来我们就在代码中讲解
创建个文本，
创建个渐变的背景，
背景设置宽度，
字体设置填充色

// html部分
<div class="box">
    <p class="b1">一只野生前端</p>
</div>

// css部分
 .box {
          margin: 50px auto;
          width: 500px;
          font-size: 20px;
      }

  .b1 {
        background:#111  -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
        -webkit-background-size: 50px;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
       }

效果如下：

阶段效果一

接下来我们就需要把背景裁剪成文字的前景色

        .b1 {
            background:#111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
            -webkit-background-size: 50px;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
            -webkit-background-clip: text;
        }

效果如下：

阶段效果二

现在静态的扫光效果就初步完成了，接下来我们只要控制background的position属性，让它动起来。

        .b1 {
            background:#111 -webkit-linear-gradient(left, #111, #fff) 0 0 no-repeat;
            -webkit-background-size: 50px;
            -webkit-text-fill-color: rgba(255, 255, 255, 0.3);
            -webkit-background-clip: text;
            -webkit-animation: slideShine 5s infinite;
        }
        @-webkit-keyframes slideShine {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 100% 100%;
            }
        }

效果如下：

阶段效果三

好了，现在整个效果就实现了，大家也可以把背景颜色渐变变成背景图片，效果也是很好的。