这个案例代表了国内CSS技能最高水平，这样的一个文字交融效果，你能否一眼看穿他的原理呢？

到底是什么样的实现思路，居然让这么多渡一的同学感觉 CSS 白学了？

效果看上去确实非常的吓人，但掌握了原理之后几行代码就可以实现。

我是渡一子辰老师，接下来让我来带你分析文字交融效果的实现原理

效果实现

我们先来看一下基本的代码。

body {

  background: #000;

}

.container {

  margin-top: 50px;

  text-align: center;

  background-color: #000;

}
.text {
  font-size: 100px;
  color: #fff;
}

<body>
  <div class="container">
    <span class="text">Duyi Education</span>
  </div>
</body>

标签和样式都是非常简单的，现在我们首先要搞定第一个问题，就是如何让文字从中间向两边开始展开。

这里我们可以利用 letter-spacing 属性，这个属性是改变字符间距的，我们可以先把字符缩小到聚合在一起的程度，然后再利用动画展开到合适的间距。

可以看到在 letter-spacing 为 -50px 的时候文字刚好聚合在一起了。

然后利用动画让它在指定的时间展开到合适的间距。

.text {
  font-size: 100px;
  color: #fff;
  animation: showup 3s forwards;
}
@keyframes showup {
  0% {
    letter-spacing: -50px;
  }
  100% {
    letter-spacing: 10px;
  }
}

现在展开是没问题了，接下来就是交融效果了。

首先我们为文本设置一个模糊。

文本模糊之后你就会发现，这些文字的边缘部分，处于一个灰度状态，哪这样肯定不行，我们要让它做一个抉择，要不就黑色，要不就白色。

我们找到父元素，同样设置 filter，但是这一次给它设置为 contrast 表示对比度。

对比度的值越大就表示黑的越黑，白的越白，那些灰度状态的地方自己做抉择。

然后就变成了上图这个样子。

我们继续调整文本的模糊程度。

会发现模糊程度越大，交融越明显。

所以我们要做动画也很简单，就找让文本从一个非常模糊的值变到一个不那么模糊的值。

body {

  background: #000;

}

.container {

  margin-top: 50px;

  text-align: center;

  background-color: #000;

  filter: contrast(30);
}
.text {
  font-size: 100px;
  letter-spacing: -50px;
  color: #fff;
  animation: showup 5s linear forwards;
}
@keyframes showup {
  0% {
    filter: blur(10px);
  }
  100% {
    letter-spacing: 10px;
    filter: blur(2px);
  }
}