クイックヒント：CSSのテキストグラデーションとパターンをアニメーション化する方法

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

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

ペンを参照してください

SitePoint（@SitePoint）

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

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

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

ペンを参照してください

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

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

ステップ1：バックグラウンドサイズの調整

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

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

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

ペンを参照してください

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

Codepenで。

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

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

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

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

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

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

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

ペンを参照してください

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

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

ペンを参照してください

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

ペンを参照してください

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

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

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

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

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

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

結論

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

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