使用滤镜实现文字根据动画图片的效果

上周写了一篇文字智能适配背景的文章，其中涉及到了色彩与滤镜方面的知识，也提到了直接在 CSS 上使用滤镜。

今天，我们趁热打铁，使用 CSS 的滤镜写相对来说比较炸裂的文字根据动画图片的特效吧！

一、动画与文字

直接在 body 中放入一个 div 元素，然后用我男朋友高中时候原创的小说《卡通足球赛》为文字，并放到 div 元素中。 

<div>
  <h1>卡通足球赛</h1>
  <p>公元二零一二年二月二十七日下午十四点三十分,第二十五届卡通世界杯足球赛的决赛,在米花足球场上激烈的打了起来。</p>
  <p>第二十五届卡通世界杯足球赛决赛，比赛双方是夺冠大热门足球小子队和卫冕冠军名侦探柯南队。由于是卡通足球世界杯的决赛，因此，双方都派出了最强阵容，下面为大家介绍双方的出场阵容：</p>
  <p>足球小子队：一号守门员若林、七号中后卫十七料、五号左后卫松山、八号右后卫金择手、十号中场大空翼、十一号中前卫公大狼、九号后腰仁治、十二号左前卫正和、十三号助攻手松仁、十五号右前卫永和、十四号主攻手正纯。</p>
  <p>名侦探柯南队：一号守门员黑羽快斗、四号中后卫京极真、七号左后卫赤井秀一、五号右后卫工藤优作、八号后腰拿武士、十号中场江户川柯南、九号助攻手服部平次、十一号主攻手工藤新一、十五号右前锋赤木英雄、十三号左前锋上村植树、二十一号自由人毛利小五朗。</p>
  <p>这场比赛确实是一场超对绝，双方每个队员都球技精湛，有的身怀绝技，有的甚至身怀武艺！因此，这场比赛被米花电视台现场直播，全宇宙播放。此时此刻，不管是小孩还是大人或者老人，不管是在家休息或者在外渡假的闲人还是正忙于打工的忙人，不管是还活生生的生活在地球上的人或动物还是现在已经生在天国的人或动物，只要此时此刻仍然生活在这个宇宙上且懂足球的一切生物，都目不转睛地盯着米花足球场或者转播的电视。甚至连盲人也甘愿自杀，到天国去欣赏这场独一无二且空前绝后的足球比赛！</p>
  <p>本场比赛的主裁判是青山刚昌。至今为止，还没有人能够找到青山刚昌误判的一点证据。副裁判山岸容一和两个助理裁判高桥阳一和平良隆久是青山刚昌推荐的。</p>
  <p>青山刚昌一声哨响，比赛开始了。首先发球的是足球小子队，足球王子正纯和大公翼、公大狼两人打起了传说中才有的三角函数，很快攻到了对方的禁区前沿。传统的三角函数，名侦探柯南队早已有所准备，京极真、赤井秀一和工藤优作放映迅速，临危不惧，冷静的以反三角函数奋力抵抗。球一直在名侦探柯南队的禁区前沿飞来飞去，双方陷入了僵持的局面。大公翼见势不妙，随惯性量出绝交：倒挂临空大力曲线射门。俗话说，进攻是最好的防守，面对绝招，当然只有将计就计将招破招。化解倒挂临空大力曲线射门的唯一招数就只有少林派的鬼影擒拿手。在少林派以鬼影擒拿手出名的黑羽快斗拿下这个球是不在话下，于是，他把球开向了中场的江户川柯南，打起了名侦探柯南队的第一次进攻……</p>
  <p>比赛已经接近尾声，比分还是零比零。</p>
  <p>足球小子队的进攻是出了名的，但是这场比赛他们却被迫退回来打防守。如果说足球小子队的进攻是最尖锐的矛，那么名侦探柯南队的防守就是最坚硬的盾。然而，这场比赛，名侦探柯南队却让观众们大大的出忽意料，他们把进攻表现的宛如艺术般的优美自得，打得足球小子队只有招架之功毫无还手之力。很明显，名侦探柯南队占据了这场比赛的主动权，场上的节奏全被他们控制得天衣无缝。</p>
  <p>也许，在众多观众看来，这样的局面是多么的出忽意料，因为在这之前，足球小子对是更被看好夺冠无疑的。然而，这样的事实也确实不足为奇，因为他们已经预料到会在决赛中和有史以来最强的足球小子队碰面，对足球小子队的前六场比赛作了录象和研究，寻找防守的中心和进攻的突破口。</p>
  <p>以之恰恰相反的是足球小子队的赛前准备。在上一届卡通足球世界杯中，有史以来最强的名侦探柯南队在决赛里以二比一艰难的战胜了足球小子队而取得冠军。在那之后，随着毛利兰、灰原哀等几名大将的退役，名侦探柯南队的实力有了明显削弱。同时足球小子对又在头号门将凯力之后又引进了有守门机器之称的天才守门员若林，实力明显上升。因此，足球小子队几乎没有意料到名侦探柯南队会以极其新颖的打法而杀入决赛再次阻碍他们的夺冠路程。</p>
  <p>准备不充分的后果往往就体现为被动，这次也不例外，以江户川柯南为核心的中场防线基本上成了足球小子队的进攻极限。整场比赛，足球小子队的射门次数没有超过三次，基本上都是名侦探柯南队在足球小子队的门前狂轰乱炸。若不是若林的出色发挥，恐怕足球小子队早就失败的无眼见江东父老了！</p>
  <p>有的时候，上帝是不公平的，足球有的时候也是这样，得势不得利。可能是因为足球小子队的门前站着位天使吧，大好形式下，名侦探柯南队却始终没有能够破门得分。</p>
  <p>血红而又光彩夺目的五字在山岸容一的手中更吸引了不少人的目光。比赛已经进入伤停补时阶段，补时五分钟。大家都明白，五分钟后将意味着什么。尽管可能性几乎为零，但是相信大家都不愿意这样一场生死较量的胜负将拜托与残酷的点球大战。</p>
  <p>虽然名侦探柯南队今天的运气可以说是差到定了，但是冠军的目标在他们每一个人的心中始终没有丝毫的动摇。他们相信，世界是有公道，付出总有回报。一切目标的实现都离不开坚持不懈的具体行动，火战了九十分钟，他们没有一个的脸上挂有一死疲惫的表情。他们是钢铁般的巨人，不到最后一秒中，决不轻言放弃！</p>
  <p>比赛时间还有不到一分钟，名侦探柯南队获得一粒角球。也许，这将会是名侦探柯南队最后的机会；也许，这将会是比赛结束的标志；也许，这将会是双方之间的某一方永远的痛……</p>
  <p>江户川柯南把球开出，一粒直球，看形式好象是发给赤木英雄的头球，在大多数人看来是这样。眼看球已经要飞到了赤木英雄的头上，赤木英雄却突然一漏，把球漏给了抢后点的工藤新一。若林不愧为本届世界杯的金手套，这样的障眼法骗过了几乎所有的观众和防守队员，却被若林提前做了防范。然而，也许是太过于自信，事实却偏偏出忽了若林的意料。俗话说，集体力量大，默契是团队精神的核心。工藤新一也故作摆头，却好象不小心似的把求漏了。若林终于傻眼了，他可能连做梦也想不到，魔高一迟，道高一丈，一个人的力量始终不是集体力量的对手。江户川柯南开了一个漂亮的香蕉球，赤木英雄和工藤新一假装头球其实是假动作，骗过若林后，这个球挂入了远门柱的死角……</p>
  <p>整个足球场像是触电似的，顿时沸腾了起来。一比零，名侦探柯南队凭借江户川柯南的一粒漂亮的香蕉球，以一比零艰难的战胜了足球小子队，夺的了第二十五届卡通世界杯足球赛的大力神杯！</p>
</div>

为了效果，我们把 HTML 元素的默认外边距、内间距和边框都重定义：

* {
  margin: 0;
  padding: 0;
  border: none;
}

使用一张 GIF 动图作背景图：

将这张图片使用 CSS 设置为 div 元素的背景，同时控制 div 的高度和背景图片的大小： 

div {
  height: 100vh;
  background-image: url('./running.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: hidden;
}

直接设置了溢出为隐藏，因为我们只需要一屏文字的效果：

为了更好的效果，我们控制一下字体大小及其文字粗细，让其占满整个屏幕，并对每一段文字都按照中文文章常识缩进两个文字格。

div > h1 {
  text-align: center;
}
div > p {
  font-size: 20px;
  font-weight: bolder;
  text-indent: 2em;
}

明显看到，文字更大面积的遮住了背景动画。

这样，我们就已经把图片和文字都放到页面中了。

二、背景滤镜

给文字设置一个天蓝色：

div {
  height: 100vh;
  background-image: url('./running.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  color: rgba(171, 205, 239, .25);
  overflow: hidden;
}

天蓝色的色值，用十六进制是 #abcdef，其对应的 RGB 值是 R - 171、G - 205、B - 239，并设置透明度为 0.25。

很明显，天蓝色且半透明的文字，在深色背景上，看着比较模糊了。于是，我们给背景添加一个变亮滤镜，并让背景色根据文字进行裁剪。

div {
  height: 100vh;
  background-image: url('./running.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: lighten;
  background-clip: text;
  color: rgba(171, 205, 239, .25);
  overflow: hidden;
}

background-blend-mode 属性指定 HTML 元素的背景层（包括背景颜色、背景图片等）之间的混合模式；

lighten 取的是两层 HTML 元素的颜色中较亮的那个颜色作为结果颜色，其结果倾向于保留两个层叠的 HTML 元素中最浅的色彩；

background-clip 属性设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面；

text 让背景被裁剪成文字的前景色。

此时，我们可以看到背景图中的动画呈现于文字上了。 

三、提升效果

到目前为止，这个相对炸裂的效果已经出来了，奈何动画看不清楚，需要提亮。于是，我们我们通过 Photoshop 把背景图变成透明背景。

GIF 动画可以设置透明背景，但是会存在一个白边，导致呈现效果相对较差。在这个案例中，网页背景原本就是白色，所以这个白边可以忽略。

把背景图片替换成透明背景的 GIF 动画后，得到如下效果：

这样的效果，感觉还不错吧？把所有源代码给到大家，拿走不谢！O(∩_∩)O

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
  border: none;
}
div {
  height: 100vh;
  background-image: url('./run.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: lighten;
  background-clip: text;
  color: transparent;
  overflow: hidden;
}
div > h1 {
  text-align: center;
}
div > p {
  font-size: 20px;
  font-weight: bolder;
  text-indent: 2em;
}
</style>
</head>
<body>
<div>
  <h1>卡通足球赛</h1>
  <p>公元二零一二年二月二十七日下午十四点三十分,第二十五届卡通世界杯足球赛的决赛,在米花足球场上激烈的打了起来。</p>
  <p>第二十五届卡通世界杯足球赛决赛，比赛双方是夺冠大热门足球小子队和卫冕冠军名侦探柯南队。由于是卡通足球世界杯的决赛，因此，双方都派出了最强阵容，下面为大家介绍双方的出场阵容：</p>
  <p>足球小子队：一号守门员若林、七号中后卫十七料、五号左后卫松山、八号右后卫金择手、十号中场大空翼、十一号中前卫公大狼、九号后腰仁治、十二号左前卫正和、十三号助攻手松仁、十五号右前卫永和、十四号主攻手正纯。</p>
  <p>名侦探柯南队：一号守门员黑羽快斗、四号中后卫京极真、七号左后卫赤井秀一、五号右后卫工藤优作、八号后腰拿武士、十号中场江户川柯南、九号助攻手服部平次、十一号主攻手工藤新一、十五号右前锋赤木英雄、十三号左前锋上村植树、二十一号自由人毛利小五朗。</p>
  <p>这场比赛确实是一场超对绝，双方每个队员都球技精湛，有的身怀绝技，有的甚至身怀武艺！因此，这场比赛被米花电视台现场直播，全宇宙播放。此时此刻，不管是小孩还是大人或者老人，不管是在家休息或者在外渡假的闲人还是正忙于打工的忙人，不管是还活生生的生活在地球上的人或动物还是现在已经生在天国的人或动物，只要此时此刻仍然生活在这个宇宙上且懂足球的一切生物，都目不转睛地盯着米花足球场或者转播的电视。甚至连盲人也甘愿自杀，到天国去欣赏这场独一无二且空前绝后的足球比赛！</p>
  <p>本场比赛的主裁判是青山刚昌。至今为止，还没有人能够找到青山刚昌误判的一点证据。副裁判山岸容一和两个助理裁判高桥阳一和平良隆久是青山刚昌推荐的。</p>
  <p>青山刚昌一声哨响，比赛开始了。首先发球的是足球小子队，足球王子正纯和大公翼、公大狼两人打起了传说中才有的三角函数，很快攻到了对方的禁区前沿。传统的三角函数，名侦探柯南队早已有所准备，京极真、赤井秀一和工藤优作放映迅速，临危不惧，冷静的以反三角函数奋力抵抗。球一直在名侦探柯南队的禁区前沿飞来飞去，双方陷入了僵持的局面。大公翼见势不妙，随惯性量出绝交：倒挂临空大力曲线射门。俗话说，进攻是最好的防守，面对绝招，当然只有将计就计将招破招。化解倒挂临空大力曲线射门的唯一招数就只有少林派的鬼影擒拿手。在少林派以鬼影擒拿手出名的黑羽快斗拿下这个球是不在话下，于是，他把球开向了中场的江户川柯南，打起了名侦探柯南队的第一次进攻……</p>
  <p>比赛已经接近尾声，比分还是零比零。</p>
  <p>足球小子队的进攻是出了名的，但是这场比赛他们却被迫退回来打防守。如果说足球小子队的进攻是最尖锐的矛，那么名侦探柯南队的防守就是最坚硬的盾。然而，这场比赛，名侦探柯南队却让观众们大大的出忽意料，他们把进攻表现的宛如艺术般的优美自得，打得足球小子队只有招架之功毫无还手之力。很明显，名侦探柯南队占据了这场比赛的主动权，场上的节奏全被他们控制得天衣无缝。</p>
  <p>也许，在众多观众看来，这样的局面是多么的出忽意料，因为在这之前，足球小子对是更被看好夺冠无疑的。然而，这样的事实也确实不足为奇，因为他们已经预料到会在决赛中和有史以来最强的足球小子队碰面，对足球小子队的前六场比赛作了录象和研究，寻找防守的中心和进攻的突破口。</p>
  <p>以之恰恰相反的是足球小子队的赛前准备。在上一届卡通足球世界杯中，有史以来最强的名侦探柯南队在决赛里以二比一艰难的战胜了足球小子队而取得冠军。在那之后，随着毛利兰、灰原哀等几名大将的退役，名侦探柯南队的实力有了明显削弱。同时足球小子对又在头号门将凯力之后又引进了有守门机器之称的天才守门员若林，实力明显上升。因此，足球小子队几乎没有意料到名侦探柯南队会以极其新颖的打法而杀入决赛再次阻碍他们的夺冠路程。</p>
  <p>准备不充分的后果往往就体现为被动，这次也不例外，以江户川柯南为核心的中场防线基本上成了足球小子队的进攻极限。整场比赛，足球小子队的射门次数没有超过三次，基本上都是名侦探柯南队在足球小子队的门前狂轰乱炸。若不是若林的出色发挥，恐怕足球小子队早就失败的无眼见江东父老了！</p>
  <p>有的时候，上帝是不公平的，足球有的时候也是这样，得势不得利。可能是因为足球小子队的门前站着位天使吧，大好形式下，名侦探柯南队却始终没有能够破门得分。</p>
  <p>血红而又光彩夺目的五字在山岸容一的手中更吸引了不少人的目光。比赛已经进入伤停补时阶段，补时五分钟。大家都明白，五分钟后将意味着什么。尽管可能性几乎为零，但是相信大家都不愿意这样一场生死较量的胜负将拜托与残酷的点球大战。</p>
  <p>虽然名侦探柯南队今天的运气可以说是差到定了，但是冠军的目标在他们每一个人的心中始终没有丝毫的动摇。他们相信，世界是有公道，付出总有回报。一切目标的实现都离不开坚持不懈的具体行动，火战了九十分钟，他们没有一个的脸上挂有一死疲惫的表情。他们是钢铁般的巨人，不到最后一秒中，决不轻言放弃！</p>
  <p>比赛时间还有不到一分钟，名侦探柯南队获得一粒角球。也许，这将会是名侦探柯南队最后的机会；也许，这将会是比赛结束的标志；也许，这将会是双方之间的某一方永远的痛……</p>
  <p>江户川柯南把球开出，一粒直球，看形式好象是发给赤木英雄的头球，在大多数人看来是这样。眼看球已经要飞到了赤木英雄的头上，赤木英雄却突然一漏，把球漏给了抢后点的工藤新一。若林不愧为本届世界杯的金手套，这样的障眼法骗过了几乎所有的观众和防守队员，却被若林提前做了防范。然而，也许是太过于自信，事实却偏偏出忽了若林的意料。俗话说，集体力量大，默契是团队精神的核心。工藤新一也故作摆头，却好象不小心似的把求漏了。若林终于傻眼了，他可能连做梦也想不到，魔高一迟，道高一丈，一个人的力量始终不是集体力量的对手。江户川柯南开了一个漂亮的香蕉球，赤木英雄和工藤新一假装头球其实是假动作，骗过若林后，这个球挂入了远门柱的死角……</p>
  <p>整个足球场像是触电似的，顿时沸腾了起来。一比零，名侦探柯南队凭借江户川柯南的一粒漂亮的香蕉球，以一比零艰难的战胜了足球小子队，夺的了第二十五届卡通世界杯足球赛的大力神杯！</p>
</div>
</body>
</html>

一般来说，文章写到这里就可以了。不过我们可以再想一下，是否可以继续延申呢？

四、过滤、滤镜与透明

咱们尝试一下，把文字变成透明色：

div {
  height: 100vh;
  background-image: url('./run.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: lighten;
  background-clip: text;
  color: transparent;
  overflow: hidden;
}

 得到如下效果：

然后，我们再使用 filter 属性过滤一下背景图中的色彩，并使用 mix-blend-mode 属性设置文字的滤镜效果：

div {
  height: 100vh;
  background-image: url('./run.gif');
  background-repeat: no-repeat;
  background-size: 100%;
  background-blend-mode: lighten;
  background-clip: text;
  color: transparent;
  overflow: hidden;
  filter: grayscale(1);
  mix-blend-mode: hard-light;
}

这里，我们用到了另外一个冷门的的 CSS 属性 filter。

filter 属性也是一种滤镜，其功能是将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。其使用的语法如下：

/* <filter-function> 值 */
filter: blur(5px); // 将高斯模糊应用于输入图像。
filter: brightness(0.4); // 将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。
filter: contrast(200%); // 调整输入图像的对比度。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。
filter: drop-shadow(16px 16px 20px blue); // 使用 <shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 <box-shadow>（在 CSS 背景和边框模块中定义），但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。
filter: grayscale(50%); // 将图像转换为灰度图。值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。
filter: hue-rotate(90deg); // 应用色相旋转。<angle> 值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。
filter: invert(75%); // 反转输入图像。值为 100% 则图像完全反转，值为 0% 则图像无变化。值在 0% 和 100% 之间，则是该效果的线性乘数。
filter: opacity(25%); // 应用透明度。值为 0% 则使图像完全透明，值为 100% 则图像无变化。
filter: saturate(30%); // 改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。
filter: sepia(60%); // 将图像转换为深褐色。值为 100% 则完全是深褐色的，值为 0% 图像无变化。

/* URL */
filter: url("filters.svg#filter-id"); // 使用 url() 来引用 SVG 滤镜元素。

/* 多个滤镜 */
filter: contrast(175%) brightness(3%); // 组合任意数量的函数来控制渲染，其滤镜将按声明顺序依次应用。
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用滤镜 */
filter: none;

/* 全局值 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

这样设置之后，我们得到了如下效果：

今天的例子比较简单，回头我们再扩展开，把 filter 滤镜进行扩展讲解，让我们敬请期待吧！

关注我，为您送上更多精彩内容！