CSS を使用してテキスト アニメーション効果をロードする

現在、アニメーションは、より多くのユーザーを引き付けるためのアプリの最も強力な機能であり、アプリの探索に対するユーザーの関心を高めます。 Web アプリケーションでは、HTML と CSS を使用してアニメーションを作成できます。ただし、JavaScript を使用してアニメーションを作成することはできますが、Web サイトの速度が低下します。

このチュートリアルでは、HTML と CSS を使用してテキスト アニメーションを読み込む方法を学習します。 API からデータを取得するとき、または Web ページを読み込むとき、読み込みテキストをアニメーション化してより魅力的にすることが重要です。

例 1

以下の例では、「loader」 div 要素と「loader-inner」 div 要素を作成しました。 CSS では、ローダー div に固定サイズを与え、「回転」キーフレームを使用してアニメーション化します。アニメーション時間を 3 秒に設定します。

さらに、loader-inner div 要素の内部回転キーフレームと、loader div 要素内の位置を設定します。

「回転」キーフレームと「内側回転」キーフレームでは、ローダーを 0 度から 360 度まで移動します。ユーザーは出力内で回転するローダーを観察でき、途中でテキストが読み込まれます。

リーリー

例 2

以下の例では、読み込みバーを作成します。ここでは、loader div 要素とその中に bar div 要素を作成しました。ローダーのdiv要素のサイズとbar要素のアニメーションをCSSで設定しました。

アニメーションには「バーアニメーション」キーフレームを使用します。 「bar-animation」では、div 要素の幅を変更して、読み込みバーのように動作させます。

リーリー

例 3

以下の例では、バウンス読み込みテキストを作成します。ここでは、Loading 単語の各文字を別の div 要素に追加します。その後、「アニメーション」キーフレームを使用してすべてのキャラクターをアニメーション化します。アニメーション キーフレームでは、キャラクターの垂直位置を変更します。

さらに、「n-th-child()」メソッドを使用して、すべての div 要素に 1 つずつアクセスし、アニメーションの遅延を設定します。出力では、ユーザーはバウンス読み込みテキストを確認できます。

リーリー

例 4

以下の例では、読み込み中のテキストにぼかし効果を追加します。ここでは、ロードワードの各文字を別の「span」要素に追加します。その後、「n-th-child()」CSSメソッドを使用して各span要素に1つずつアクセスし、アニメーションを追加します。スパン要素では、特定の量のアニメーション遅延を伴う「ぼやけたテキスト」アニメーションを追加します。

アニメーション キーフレームでは、テキストにぼかしフィルターを適用して、読み込まれたテキストに連続的なぼかし効果を表示します。

リーリー

ユーザーは、このチュートリアルで 4 つの異なるタイプの読み込みアニメーションを学習しました。最初の例では、テキストを含む回転荷重インジケーターを作成します。 2 番目の例では、ローディング バーを作成します。さらに、3 番目の例ではバウンス読み込みテキストを作成し、最後の例ではテキストにぼかし効果を追加しました。

以上がCSS を使用してテキスト アニメーション効果をロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。