流体动画 CSS 渐变文本效果

CSS 动画非常棒。它们不仅可以制作出色的数字艺术作品，还能让我们在网页中添加流畅的设计元素。最近，我在我的许多博客链接中集成了 CSS 渐变动画，赋予它们生动流畅的感觉。请参阅下方我的“近期文章”模块。

注意：为了演示目的，gif 已加速

是不是很棒？而且实现起来也相当简单。我们真正需要的只是 CSS！

让我们解构它

因此，我的 CSS 中首先要做的事情就是设置动画规则。 这里，我设置了一个名为flow的动画，播放时长为30 秒。将动画设置为ease in 和 ease out以获得更平滑的效果，并让动画无限循环。

然后是背景规则。 我将背景设置为线性渐变，并赋予它我想要的颜色。为了获得漂亮的渐变效果，当实在想不出什么好点子时，我经常会使用UI Gradients 。然后，我使用background-size属性将背景拉伸到 300% 大小，以便动画有足够的移动空间。

然后，我将背景剪辑设置为文本，并将文本填充颜色设置为透明，这样我的默认字体颜色就不会干扰我的渐变。

现在开始实际的动画制作。我创建了一个名为“flow”的关键帧动画，并在0%、50%和100%的位置分别设置了关键帧。 最终效果如下：

动图