快速提示：如何使CSS中的文本梯度和图案动画

在此快速提示中，我们将展示使用CSS进行背景梯度动画的容易。

>在最近的一篇文章中，我们展示了如何在文本上设置背景梯度。下面的Codepen演示显示了结果。

>

参见笔
sitepoint（@sitepoint）的左至右梯度的文本
在Codepen上。

>如果您不确定我们如何获得此结果，请务必阅读该文章，因为我们将在下面的示例上构建。

为了这个演示，让我们在渐变背景中添加一些额外的颜色：

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

如果我们关闭背景卷 - 文本和文本颜色：透明片刻，我们可以更好地了解我们的渐变如何填充文本的内容框。

参见笔

带有动画背景梯度的文本：1 by sitepoint（@sitepoint）
在Codepen上。

>现在让我们浏览动画背景梯度的步骤。

>步骤1：调整背景大小

为了使我们的梯度背景动画，我们需要使其比文本的内容框更大，这样我们就无法一次看到所有内容。我们可以使用方便的背景大小属性来做到这一点。 （您可以在此处阅读有关背景大小的所有内容。）

>

>我将将我们的背景梯度的宽度设置为标题元素的宽度的三倍：

现在，任何一次都只能看到梯度背景的三分之一，如下所示。

参见笔

<span>h1 {
</span>  <span>background-size: 300% 100%;
</span><span>}
</span>

带有动画背景梯度的文本：步骤2 by sitepoint（@sitepoint）

在Codepen上。

>步骤2：设置动画

接下来，我们将设置一个动画，该动画将随着时间的流逝而看到背景。

我们可以设置一个简单的动画规则：

>每16秒钟一次来回移动背景。

>

接下来，我们将设置一个@keyframes语句：

<span>h1 {
</span>  <span>animation: gradientAnimation 8s linear infinite;
</span><span>}
</span>

这个简单的@keyframes语句将每八秒钟将我们的背景从左上角移到右下方。

在下面的笔中，我们再次禁用了背景卷：文本和颜色：透明，以便我们可以看到背景中发生的事情。

参见笔
带有动画背景梯度的文本：步骤3 by sitepoint（@sitepoint）
在Codepen上。

一旦我们重新启用了背景折叠：文本和颜色：透明，我们会看到成品。

参见笔
带有动画背景梯度的文本：步骤4（最终）by sitepoint（@sitepoint）
在Codepen上。

非常酷！

动画背景图像

>在我们的文章中添加梯度效果和图案的文章中，我们还使用了花卉背景图像。 （请参阅这里的笔。）

>让我们也可以对该背景进行动画动画。我们会稍有不同，因为我们不想扭曲背景图像。

>让我们删除背景大小：从原始演示中包含，而根本不设置背景大小。这给我们留下了：

<span>h1 {
</span>  <span>background-image: linear-gradient(
</span>    <span>45deg,
</span>    <span>#ffb3ba,
</span>    <span>#c49c6e,
</span>    <span>#bfbf76,
</span>    <span>#77b084,
</span>    <span>#ff7e74,
</span>    <span>#3b82f6,
</span>    <span>#c084fc,
</span>    <span>#db2777
</span>   <span>);
</span><span>}
</span>

该结果显示在下面的Codepen演示中。

参见笔

通过sitepoint（@sitepoint）在文本上为背景图像进行动画> 在Codepen上。

>

尝试关闭背景折叠：文本和文本色：如果您想查看背景中发生的事情，请稍等一下。

>我们的背景图像默认是重复的，对于此特定图像来说，这看起来还不错。 （只是出于兴趣，尝试添加背景重复：否重复以查看没有重复背景的情况。）在其他情况下，背景图像瓷砖不那么好，您可能需要防止图像重复和然后使用背景大小来使图像更大，就像我们在上面的梯度背景下一样。例如：

这是对我们的花卉演示这样做的效果。

>

参见笔
在文本上对背景图像进行动画：sitepoint（@sitepoint）
的step1a（背景大小实验） 在Codepen上。

结论

>我们可以做更多的壮观动画，但目的是在这里保持简单。您可以深入研究CSS关键帧和动画，以使用CSS动画开始。您也可以在动画的时机，梯度的角度等方面玩耍。

> 如前一篇文章所述，

对此很有趣，但不要过分，因为这种动画太多会变得令人讨厌。标题上的微妙的动画背景可能会添加您需要保持观众参与的兴趣或兴趣。

>

以上是快速提示：如何使CSS中的文本梯度和图案动画的详细内容。更多信息请关注PHP中文网其他相关文章！