在这个小技巧中，我们将展示如何用 CSS 轻松地让背景渐变动起来。

在最近的一篇文章中，我们展示了 如何在文本上设置背景渐变。下面的 CodePen 演示展示了结果。

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: linear-gradient(
    to right, 
    #218bff, 
    #c084fc, 
    #db2777
  );
}

如果你不确定我们是如何得到这个结果的，请务必阅读那篇文章，因为我们将在下面的例子中以此为基础。

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

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

如果我们暂时关闭 background-clip: text 和 text-color: transparent，我们可以更好地了解渐变是如何填充文本内容框的。

现在让我们来看看如何让背景渐变动起来。

第 1 步：调整背景大小

要让渐变背景动起来，我们需要让它比文本内容框大，这样我们就不能一次看到它的全部。我们可以使用方便的 background-size 属性来做到这一点。

我将把渐变背景的宽度设置为标题元素宽度的三倍：

h1 {
  background-size: 300% 100%;
} 

现在，任何时候都只能看到三分之一的渐变背景，如下所示。

第 2 步：设置动画

接下来，我们将设置一个动画，使背景移动，这样我们就能随着时间的推移看到不同的部分。

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

h1 {
  animation: gradientAnimation 8s linear infinite;
} 

这将使背景每 16 秒来回移动一次。

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

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
} 

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

在下面的 Pen 中，我们再次禁用了 background-clip: text 和 color: transparent，这样我们就可以看到背景中发生的事情。

h1 {
  background-image: linear-gradient(45deg, #ffb3ba, #c49c6e, #bfbf76, #77b084, #ff7e74, #3b82f6, #c084fc, #db2777);
  /*color: transparent;*/
  /*-webkit-background-clip: text;*/ /* Edge, Chrome */
  /*background-clip: text;*/ /* Safari, FF */
  animation: gradientAnimation 8s linear infinite;
  animation-direction: alternate;
  background-size: 300% 100%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

一旦我们重新启用 background-clip: text 和 color: transparent，我们就会看到最终的效果。

h1 {
  background-image: linear-gradient(45deg, #ffb3ba, #c49c6e, #bfbf76, #77b084, #ff7e74, #3b82f6, #c084fc, #db2777);
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  animation: gradientAnimation 8s linear infinite;
  animation-direction: alternate;
  background-size: 300% 100%;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

很酷吧！

让背景图片动起来

在我们关于为文本添加渐变效果和图案的文章中，我们还使用了一个花卉背景图片。

我们也来尝试让这个背景动起来。我们将以稍微不同的方式进行操作，因为我们不想扭曲背景图片。

让我们从原始演示中删除 background-size: contain，并且根本不设置背景大小。这给我们留下了这样的代码：

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: url(floral.jpg);
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 20s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
} 

结果如下面的 CodePen 演示所示。

如果你想看看背景中发生了什么，请尝试暂时关闭 background-clip: text 和 text-color: transparent。

我们的背景图片默认情况下是重复的，对于这张特定的图片来说，看起来还不错。(出于好奇，你可以尝试添加 background-repeat: no-repeat 来看看在没有重复背景的情况下会发生什么。)在其他情况下，如果背景图片平铺效果不好，你可能想要防止图片重复，然后使用 background-size 来放大图片，就像我们上面对渐变背景所做的那样。例如：

h1 {
  background-repeat: no-repeat;
  background-size: 120%;
} 

以下是将这种方法应用到我们的花卉演示中的效果。

h1 {
  color: transparent;
  -webkit-background-clip: text; /* Edge, Chrome */
  background-clip: text; /* Safari, FF */
  background-image: 
    url(https://uploads.sitepoint.com/wp-content/uploads/2024/03/1710934391floral.jpg);
  background-repeat: no-repeat;
  background-size: 120%;
  -webkit-text-stroke: 1px #7512d7;
  text-stroke: 1px #7512d7;
  animation: gradientAnimation 30s linear infinite;
  animation-direction: alternate;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0;
  }
  to {
    background-position: 100%;
  }
}

总结

我们可以做比这更壮观的动画，但我们的目标是保持简单。你也可以尝试调整动画的时间、渐变的角度等等。

正如上一篇文章中提到的，尽情发挥你的创意，但不要过度使用，因为太多的这种动画会让人厌烦。在标题上添加一个微妙的动画背景，可能会增加一些趣味或吸引力，让你的读者保持兴趣。