このクイックヒントでは、CSSを使用して背景勾配をアニメーション化することがどれほど簡単かを示します。

最近の記事では、テキストに背景グラデーションを設(shè)定する方法を示しました。以下のCodePenデモは、結(jié)果を示しています

ペンを參照してください

SitePoint（@SitePoint）

による左から右のグラデーションを備えたテキスト Codepenで。

この結(jié)果にどのように到達(dá)したかわからない場合は、以下の例に基づいて構(gòu)築されるように、その記事を必ず読んでください。 このデモのために、グラデーションの背景にいくつかの余分な色を追加しましょう：

バックグラウンドクリップをオフにすると、テキストとテキストカラー：しばらく透明になった場合、勾配がテキストのコンテンツボックスをどのように埋めるかについてより良い感覚が得られます。

ペンを參照してください

アニメーション化された背景グラデーションを備えたテキスト：1 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>

次に、背景グラデーションをアニメーション化するステップを確認(rèn)しましょう。

ステップ1：バックグラウンドサイズの調(diào)整

グラデーションの背景をアニメーション化するには、テキストのコンテンツボックスよりも大きくする必要があります。そうすれば、すべてを一度に見ることができません。便利なバックグラウンドサイズのプロパティでそれを行うことができます。 （ここでバックグラウンドサイズに関するすべてを読むことができます。）

バックグラウンドの幅を、見出し要素の幅の3倍に設(shè)定します。

今、以下に示すように、勾配の背景の3分の1のみが一度に表示されます。

ペンを參照してください

アニメーション化された背景グラデーションを備えたテキスト：SitePointによるステップ2（@sitepoint）

Codepenで。

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

ステップ2：アニメーションの設(shè)定

次に、背景を移動するアニメーションをセットアップして、時(shí)間の経過とともにさまざまな部分が表示されるようにします。
そうな簡単なアニメーションルールを設(shè)定できます：

16秒ごとに1回、背景を前後に移動します。

次に、@KeyFramesステートメントを設(shè)定します：

このシンプルな@KeyFramesステートメントは、8秒ごとに背景を左上から右下に移動します。

下のペンでは、バックグラウンドクリップ：テキストと色：透明なので、バックグラウンドで何が起こっているのかがわかります。

ペンを參照してください

アニメーション化された背景グラデーションを備えたテキスト：SitePointによるステップ3（@SitePoint）
Codepenで。

再生可能な背景クリップ：テキストと色：透過的に、完成品が表示されます。

ペンを參照してください

アニメーション化された背景グラデーションを備えたテキスト：SitePointによるステップ4（最終）（@SitePoint）

かなりクール！

背景畫像のアニメーション

テキストに勾配効果とパターンを追加する記事では、花の背景畫像も使用しました。 （こちらについてはペンを參照してください。）

その背景をアニメーション化してみましょう。背景畫像を歪めたくないので、少し違ったやり方で行います。

バックグラウンドサイズを削除しましょう：元のデモから封じ込められ、バックグラウンドサイズをまったく設(shè)定しません。それは私たちにこれを殘します：

結(jié)果は、以下の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>

ペンを參照してください

Textの背景畫像をSitePoint（@SitePoint）

のアニメーション化します Codepenで。

バックグラウンドクリップをオフにしてみてください：テキストとテキストカラー：バックグラウンドで何が起こっているかを見たい場合は、しばらく透明です。

背景畫像はデフォルトで繰り返されていますが、この特定の畫像に対してはそれほど悪く見えません。 （興味深いことでは、背景の繰り返しを追加してみてください：繰り返しの背景なしで何が起こるかを確認(rèn)してください。）背景畫像がそれほどうまくタイルにならない他の狀況では、畫像の繰り返しを防ぎ、次に、上記のグラデーションの背景で行ったように、背景サイズを使用して畫像を大きくします。たとえば、

これが私たちの花のデモでそれを行う効果です。

ペンを參照してください
テキストの背景畫像のアニメーション：STEP1A（背景サイズ実験）SitePoint（@SitePoint）

結(jié)論

これはもっと壯大なアニメーションを行うことができましたが、目的はここでシンプルに保つことでした。 CSSアニメーションを開始する方法について、CSSキーフレームとアニメーションをより深く掘り下げることができます。また、アニメーションのタイミング、グラデーションの角度などで遊ぶこともできます。 前の記事で述べたように、これを楽しんでいますが、この種のアニメーションが迷惑になる可能性があるため、船外に出ないでください。見出しの微妙なアニメーションの背景は、観客を引き付けるために必要な興味や陰謀のタッチを追加するかもしれません。

以上がクイックヒント：CSSのテキストグラデーションとパターンをアニメーション化する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。