快速提示：如何使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中文網其他相關文章！