NIKO'S BLOG

关于渐变的文字和背景

前言

以前一直不知道css3的背景渐变有什么用,感觉w3school里的示例好丑的说。最近在看animate.css发现这里的文字不但有渐变,而且颜色是随时间改变的,很有高大上的感觉(如下图)。于是就研究了一番,并用在了自己博客的logo上(PS:效果并不好,跟NexT的黑色主题不太搭)。

正文

直接看样式代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*这个是上面大标题的样式*/
.site__title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
/*这个是下面那个按钮的样式*/
.butt {
border: 2px solid #f35626;
line-height: 1.375;
padding-left: 1.5rem;
padding-right: 1.5rem;
font-weight: 700;
color: #f35626;
cursor: pointer;
-webkit-animation: hue 60s infinite linear;
}

其实上面的样式中我一开始看到是懵逼的,因为很多都没用过,甚至是没看过的,但是不妨碍测试。就拿.site__title这个类来测试吧,在调试工具里单独把color: #f35626;勾选掉,发现没有任何变化。为什么呢?因为我现在用的是Chrome测试的,实际上起渲染作用的是下面几条带-webkit-前缀的css。而在IE下,即使是IE11下(亲测),带-webkit-前缀的css也是无法识别的,所以color: #f35626;只是出于兼容的考略,如果在IE下浏览,则文字只显示颜色为#f35626,没有渐变,也没有文字的变化。

-webkit-background-clip: text;这条的作用则是规定背景的绘制区域为文本区域,如果单独把这一条勾选掉,会发现文字不见了,只有一个块状的渐变背景。

-webkit-text-fill-color: transparent;是设置文字的填充颜色为透明,和color同时存在时,会覆盖color的设置。如果单独勾选掉这一条,则把颜色的渲染交给color属性。文字颜色的变化还会有,但是不会有渐变效果了,而是会以纯色显示;背景仍然是渐变,而且有随时间的颜色变化。这就像当于下面要说的动画对colorbackground-image分别起作用,文字以纯色随时间改变颜色,背景以渐变随事件改变颜色。

background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);指定背景图片为92°角的双色渐变。如果单独勾选掉这一条,背景也没有了,文字没有了,因为文字本身的颜色已经设置为透明了,文字的显示是依赖于背景的(就是一种镂空效果)。

-webkit-animation: hue 60s infinite linear;这一条是为标题加了一个名为hue的动画,动画以60s为一个周期,匀速无限循环。在css源码里用Ctrl+F找到这个动画是这样定义的:

1
2
3
4
5
6
7
8
9
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}

好吧,又出现个-webkit-filter: hue-rotate(0deg);,如果上面几条属性只是没怎么用过,但至少也见过,这个是彻底没见过了。百度一下才有了个大致的了解,光看字面意思我们知道filter是滤镜,但是这个跟IE的滤镜完全是两码事,比那个好像强大了很多。菜鸟教程中是这样定义这个属性的:

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

好吧,网上说这个属性好像有10种滤镜效果呢,这个要说都可以单独写一篇博文了。反正现在知道它的作用就是加了一层滤镜就行了。而现在这个属性被放在动画中就使得渐变也有了随时间的变化。


上面已经知道这种效果是怎么做出来的了,那应该如何放在自己的博客中呢?其实这个问题可以被描述为:“怎样为Hexo的主题添加自定义的样式?”。拿我用的NexT主题为例,主题的样式文件路径为hexo\themes\next\source\css\main.styl。但是这个文件下实际上并没有定义任何样式,只是把其他所有的样式表import进来而已。在文件底部加上以下代码:

1
2
3
// my Css
// --------------------------------------------------
@import "_my/mycss"

然后在这个文件的同级目录下创建_my文件夹,在文件夹内创建_mycss.styl文件,在文件中输入以下代码(以后的自定义样式都可以放在这个文件里了):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.site-meta .site-title {
color: #f35626;
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
.logo-line-before i,
.logo-line-after i {
background : #f35626;
-webkit-animation: hue 60s infinite linear;
}
@-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}

好啦,在项目根目录下打开终端命令窗口,输入以下命令,本地预览效果就出来啦:

1
hexo s -g

拜了个拜~

笔者注

博客内文章若不另外注明,均为原创。转载请注明出处,谢谢。

博客内容主要是对新知识的归纳、总结。记录博客的目的也是为了方便自己日后的巩固复习。欢迎大家提出文章中理解错误的地方,不胜感激。若文章对你有帮助,将是我的荣幸。