这个案例代表了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);
}
}
这样效果就实现了。
总结
通过这篇文章，我们学习了如何用 CSS 实现一个文字交融的动画效果。
我们主要利用了 letter-spacing 和 filter 属性，以及 keyframes 动画。
这个效果不仅简单易懂，而且非常有创意和视觉冲击力。
希望你能够在自己的项目中尝试使用这个效果，或者根据自己的想法创造出更多更有趣的 CSS 动画效果。
如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
