--- theme: smartblue highlight: a11y-dark --- 这个案例代表了超高的CSS水平，这样的一个文字交融效果，你能否一眼看穿他的原理呢？

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

效果看上去确实非常的吓人，但掌握了原理之后几行代码就可以实现。我是渡一子辰老师，接下来让我来带你分析文字交融效果的实现原理 # 效果实现我们先来看一下基本的代码。 ```css body { background: #000; } .container { margin-top: 50px; text-align: center; background-color: #000; } .text { font-size: 100px; color: #fff; } ``` ```html

Duyi Education

``` 标签和样式都是非常简单的，现在我们首先要搞定第一个问题，就是如何让文字从中间向两边开始展开。这里我们可以利用 `letter-spacing` 属性，这个属性是改变字符间距的，我们可以先把字符缩小到聚合在一起的程度，然后再利用动画展开到合适的间距。

可以看到在 `letter-spacing` 为 `-50px` 的时候文字刚好聚合在一起了。然后利用动画让它在指定的时间展开到合适的间距。 ```css .text { font-size: 100px; color: #fff; animation: showup 3s forwards; } @keyframes showup { 0% { letter-spacing: -50px; } 100% { letter-spacing: 10px; } } ```

现在展开是没问题了，接下来就是交融效果了。首先我们为文本设置一个模糊。

文本模糊之后你就会发现，这些文字的边缘部分，处于一个灰度状态，哪这样肯定不行，我们要让它做一个抉择，要不就黑色，要不就白色。我们找到父元素，同样设置 filter，但是这一次给它设置为 contrast 表示对比度。对比度的值越大就表示黑的越黑，白的越白，那些灰度状态的地方自己做抉择。

然后就变成了上图这个样子。我们继续调整文本的模糊程度。

会发现模糊程度越大，交融越明显。所以我们要做动画也很简单，就找让文本从一个非常模糊的值变到一个不那么模糊的值。 ```css 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); } } ```

这样效果就实现了。 # 总结通过这篇文章，我们学习了如何用 CSS 实现一个文字交融的动画效果。我们主要利用了 letter-spacing 和 filter 属性，以及 keyframes 动画。这个效果不仅简单易懂，而且非常有创意和视觉冲击力。希望你能够在自己的项目中尝试使用这个效果，或者根据自己的想法创造出更多更有趣的 CSS 动画效果。如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！