阅读 1340

学透CSS-仿掘金APP文章加载效果-文字渐变与动画

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

创作不易,点个赞再看呗!

关注专栏,让你走进CSS世界的深处

前言

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

juejin.jpg

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

background-image

background-clip

text-fill-color

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

juejin.jpg

创建一个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%);

}
}
复制代码

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

juejin.gif

结语

学习基础知识,是为了更好的使用,只有实践才可以更好的掌握属性。 如果你对这几个属性仍然不了解,我推荐你读读我之前的其他文章。 当然关注我的专栏-学透CSS,可以更好的学习CSS.

文章分类
前端
文章标签