大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
前言
在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%);
}
}
这是我大概实现的效果，只有一段阴影，动画也不是很流畅，大家可以自由发挥，完善。实践出真知（主要是解决多个阴影和流畅度的问题，还是很简单的！！）。
结语
学习基础知识，是为了更好的使用，只有实践才可以更好的掌握属性。 如果你对这几个属性仍然不了解，我推荐你读读我之前的其他文章。 当然关注我的专栏-学透CSS,可以更好的学习CSS.
