前言

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

正文

直接看样式代码：

/*这个是上面大标题的样式*/
.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属性。文字颜色的变化还会有，但是不会有渐变效果了，而是会以纯色显示；背景仍然是渐变，而且有随时间的颜色变化。这就像当于下面要说的动画对color和background-image分别起作用，文字以纯色随时间改变颜色，背景以渐变随事件改变颜色。

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

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

@-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文件，在文件中输入以下代码（以后的自定义样式都可以放在这个文件里了）：

.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);
  }
}

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

hexo s -g

拜了个拜~

NIKO'S BLOG

关于渐变的文字和背景

前言

正文