HTML と CSS を使用してアニメーション化されたローダー リングを作成するにはどうすればよいですか?

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃概要＃＃＃

ローダーは、ほぼすべての Web アプリケーションで使用される Web コンポーネントです。 CSS はローダー リングのスタイルとアニメーションの部分に関与しているため、ローダー リングを構築するには、カスケード スタイル シート (CSS) についての事前知識が必要です。ローダー コンポーネントは、元のコンテンツが Web ページに読み込まれる前に読み込まれるためです。この機能の構築に使用される主なスタイル プロパティは、アニメーション、トランジション、キーフレームです。これら 3 つの CSS プロパティは、単純な静的なアニメーション読み込みループをアニメーション読み込みループに変えます。 ＃＃＃アルゴリズム＃＃＃

ステップ 1

- フォルダー内に HTML ファイルを作成し、テキスト エディターを使用して開きます。 HTML ボイラープレートを HTML ファイルに追加します。

ステップ 2

−

HTML ドキュメントの body タグ内に、クラス名「loading」を持つ HTML 親 div コンテナを作成します。

リーリー

ステップ 3 − サブディビジョン コンテナーを作成します。これは、クラス名が「Loader」のメイン ローダー リングです。

リーリー

ステップ 4− テキスト「Loading」を含む p タグを作成します。

リーリー

ステップ 5 − 次に、style.css ファイルを作成し、そのファイルを HTML ドキュメントにリンクします。

リーリー

ステップ 6 − 次に、HTML 要素のスタイルを設定し、Web ページでローダーの音を鳴らします。

リーリー

ステップ 7 − ローダー クラスをターゲットにし、境界半径を使用して境界を作成し、リング フレームのような構造を作成します。

リーリー

ステップ 8 − アニメーション属性をローダー要素に追加します。アニメーション名は「lring」で、アニメーションの継続時間と反復回数が含まれます。

リーリー

ステップ 9 − 次に、キーフレーム プロパティを作成し、上記のアニメーションを配置し、アニメーションを要素に設定します。

リーリー

ステップ 10 − アニメーション読み込みリングが正常に作成されました。

＃＃＃例＃＃＃

この例では、単純な HTML および CSS アニメーション プロパティを使用して、アニメーション化された読み込みループ機能コンポーネントを作成します。これを実現するために、2 つのファイルを作成しました。最初のファイルはローダー リングのレイアウトまたはフレームであるindex.html、もう 1 つのファイルはローダー リングのスタイルと動作である style.css ファイルです。 リーリー ＃＃＃結論は＃＃＃ 上記の機能は、すべての Web アプリケーションまたはモバイル アプリケーションで利用できます。上記で作成したものは単なるコンポーネントであるため、API を使用してデータまたはローカル データを取得することにより、この機能コンポーネントを実際に動作するアプリケーションに埋め込むことができます。そのため、ネットワーク データがまだ Web ページにロードされていないときに、ロード中を表示できます。画面上のアニメーション ループ データがロードされたら、ロード ループを Web サイトのコンテンツに置き換えます。さまざまなデザインのアニメーション ロードを構築することもできます。

以上がHTML と CSS を使用してアニメーション化されたローダー リングを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。