CSSを使用して高度な読み込み画面を作成する

Web サイト内の異なるページを参照する場合、開発者は Web サイトに読み込み画面を追加して、Web サイトが Web ページ間を移動するのに十分な時間を確保する必要があります。読み込み画面は、Web サイトのページが読み込み/初期化される間、ユーザーが待つ効果的な方法です。

ローディング画面を作成するにはどうすればよいですか?

ローディング画面を作成するには、HTML と CSS を使用できます。まず、パーセンテージを表示する title タグを指定する div 要素を作成します。

次に、CSS プロパティ (border-radius など) を使用して高さと幅を指定し、読み込み要素にアニメーションを追加します。また、オーバーフロー属性を使用して要素を非表示にし、メインコンテンツのみが表示されるようにします。

以下はオーバーフロー属性の構文です -

上記の構文では、overflow 属性で使用される値は、要素を非表示にするための hidden 値、要素を表示するためのvisible 値、およびスライダーを追加するためのscroll 属性にすることができることがわかります。要素が隠されています。

ロード画面をよりよく理解するために例を見てみましょう。

以下のコードでは、title タグを宣言し、div コンテナを宣言し、その中に読み込みコンテナを作成し、色で塗りつぶしてアニメーションを追加しました。その後、パーセントを表示するためにコンテナに 2 番目のタイトルを追加し、360 度回転するキーフレーム機能を追加しました。コードの出力を見てみましょう。

上記の出力を見ると、最初にタイトル タグを宣言し、次に 2 番目のタイトルを表示する色を追加するコンテナ、そしてコンテナ内のアニメーションを宣言していることがわかります。アニメーションはパーセンテージ タイトルの上で 360 度回転します。

これは、高度な読み込み画面を作成する別の例です。以下の例では、div 要素を宣言し、CSS プロパティを使用して要素のスタイルを設定するためのクラスをそれに与えます。境界線に黒と赤の色を追加し、アニメーションを追加し、キーフレーム機能を使用してコンテナを 360 度回転させました。上記のコードは、Web ページに読み込み画面を追加する方法を示しています。

出力では、2 つの色が 360 度回転していることがわかり、ページが読み込まれているような印象をユーザーに与えます。 align 属性を使用すると、ローダーをページの中央に揃えることができます。

- キーフレーム属性は、開発者が JavaScript を使用せずに HTML 要素をアニメーション化できるようにする CSS のプロパティであり、これらのキーフレームは要素のスタイルを指定します。

キーフレーム プロパティは、アニメーションを実行する時間を指定します。また、使用されるトランジションはスムーズかつ正確である必要があります。パーセンテージを指定する必要があり、開発者はアニメーションがすべてのブラウザと互換性があることを確認する必要があります。

Web 開発者は、作業中のプロジェクトに応じて、さまざまなタイプのスタイルとアニメーションを使用して読み込み画面を作成します。ユーザーは読み込み画面の見た目やページの読み込みにかかる時間に気を取られることが多いため、読み込み画面を少し変えて創造的な努力をすることが非常に重要です。これらの読み込み画面の主な目的は、Web サイトをインタラクティブにし、ページの読み込み/起動に時間がかかる場合にユーザーを退屈させないようにすることです。

以上がCSSを使用して高度な読み込み画面を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。