一个加载效果

前言

在APP上点击阅读文章，在加载文章的时候会出现掘金两个字，并且带有渐变效果的效果的。大概就是下面这张图的效果。

在前面我们学习了不少的CSS属性，大家可以猜一猜使用的是哪几个属性。没错就是下面这几个：

background-image

background-clip

text-fill-color

我们接下来就开始一步一步的实现这个效果吧！

创建一个div容器

这个容器中利用了text-aligin和line-height将单行文本垂直居中。

div {
    width: 375px;
    height: 500px;
    text-align: center;
    line-height: 500px;
    border: 1px solid #000;
    font-size:30px;
  }
<div>掘金</div>

渐变作为背景

这个设置了一个45度角，渐变色是从白色到黑色（实在是不知道掘金用的是哪个颜色，就先这样吧！！！）。

background-image: linear-gradient(45deg, #fff, #000);

效果如下图所示：

按照文字裁剪背影

效果如下图所示：好像又回到了原点，不要着急！！！

-webkit-background-clip: text;

设置字体填充颜色

-webkit-text-fill-color: transparent; 

效果如下图所示：
其实可以看的出来字体的颜色改变了。

做到这一步其实已经是结束了的，但是好像又没有结束！！！
没错，就是掘金原来的黑色背景哪里去了？？？按照我们的逻辑，这个容器就没法设置背景颜色了呀！确实也是这样，这个背景色本来就是放在外面的，最简单的方式就是给body设置。

      body {
  background-color: #181123;
}

效果不就出来了：

最后一步，添加动画

掘金APP的效果大概是这样的：几段阴影45度从文字划过，详细的大家可以去APP看看。

第一步先回到渐变作为背景的状态，在这个状态下先调试动画

首先 我们可以发现掘金这两个字是越来越亮的，所以我们只要按照一定的间隔，把白色往上移动就可以了，白色要怎么移动呢？这个时候我们就要思考了！ 白色的终点是在这两个字上的，那个我们只要把黑色的起点，按照间隔网上移动，自然而然的白色就会往上面移动。
那就好办了：我这里按照20%的间隔进行位置的变化，效果也还算凑活，大家可以多试试其他间隔。

@keyframes gradientRun {
0% {
  background-image: linear-gradient(45deg, #fff, #000 50%);
}
20% {
  background-image: linear-gradient(45deg, #fff , #000 52%);
}
40% {
  background-image: linear-gradient(45deg, #fff , #000 54%);
}
60% {
  background-image: linear-gradient(45deg, #fff , #000 56%);
}
80% {
  background-image: linear-gradient(45deg, #fff , #000 58%);
}
100%{
    background-image:linear-gradient(45deg, #fff , #000 60%);

}
}

这是我大概实现的效果，只有一段阴影，动画也不是很流畅，大家可以自由发挥，完善。实践出真知（主要是解决多个阴影和流畅度的问题，还是很简单的！！）。