HTML と CSS を使用してページ読み込みアニメーション効果を実現する方法-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

HTML と CSS を使用してページ読み込みアニメーション効果を実現する方法

yulia

Oct 30, 2018 pm 02:41 PM

cssloadingページの読み込み

Web サイトを閲覧していると、「読み込み中です。しばらくお待ちください」という状況に遭遇することがあります。このとき、ページ上に円が表示され、読み込みが完了するまで回転し続けます。 HTML と CSS を学習している友人の皆さん、HTML と CSS を使用してページ読み込みアニメーション効果を実現できますか?この記事では、CSS3 ページ読み込みアニメーションをみんなで勉強し、ページ読み込みアニメーションのコードをみんなと共有します。興味のある人は参考にしてください。

ページ読み込み時のアニメーション効果を実現するには、アニメーションアニメーション、キーフレーム、境界線の半径の丸い角、境界線の属性など、CSS で多くの属性を使用する必要があります。これらの属性を知らない友人がいる場合は、 PHP 中国語 Web サイトの関連マニュアルを参照してください: CSS マニュアル。お役に立てれば幸いです。

次は、HTML と CSS3 を使用してページ読み込み (読み込み) アニメーション効果を実装する方法の詳細な例です:

HTML 部分

読み込みアニメーションを表示する div を作成し、スタイルを設定しやすいように div にクラス名を付けます (スタイルが少ない場合は、タグ内でスタイルを設定することもできます)。具体的なコードは次のとおりです。

<body>
  <p style="font-size: 20px;">CSS加载样式</p>
  <div class="load"></div>
 </body>

CSS パーツ

ページの基本的なフレームワークはすでに存在します。次に、CSS を使用してスタイルを設定する必要があります。 div を 120px に設定し、border-radius アトリビュート値を 50% に設定して円にし、border-top と border-bottom を使用して上部と下部の円弧を設定し、その後のアニメーション設定を容易にします。

最後に、回転させるには、アニメーションと @keyframes 属性を使用する必要があります。具体的なコードは次のとおりです。

注: アニメーションと @keyframes アニメーションを使用する場合は注意してください。ブラウザの互換性のため。 (たとえば、プレフィックス -webkit- と -ms- を追加します)

.load {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
   }  
   @-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
    }
   
   @keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
    }

エフェクトレンダリングの読み込み:

HTML と CSS を使用してページ読み込みアニメーション効果を実現する方法

上記は次のとおりです。 HTML と CSS3 を使用してページ読み込み (読み込み) アニメーション効果を実現する方法について詳しく説明しています。これまでページ読み込みアニメーションに触れたことのない友人も、ぜひ試してみてください。自分のコードでページ読み込み効果が達成できるかどうかを自分で確認してください。この記事が役立つことを願っています。

【おすすめ関連チュートリアル】

1. CSS3 チュートリアル 2. #ブートストラップチュートリアル

以上がHTML と CSS を使用してページ読み込みアニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSSがよくわからない場合、どのCSSが最も理にかなっていますか？Apr 19, 2025 am 09:56 AM

ピーター・ポールはこの質問を投稿しました：

クリップパスでアニメーション化しますApr 19, 2025 am 09:52 AM

Clip-Pathは、私たちが一般的に知っているCSSプロパティの1つですが、何らかの理由で頻繁に手を伸ばすことはできません。その意味では少し怖いです

GatsbyでGraphQLプレイグラウンドを使用しますApr 19, 2025 am 09:51 AM

私はあなたのほとんどがすでにギャツビーについて聞いていると仮定しており、少なくともそれが基本的に反応サイトの静的サイトジェネレーターであることを大まかに知っています。一般的に

タイプまたはテスト：両方ではないのはなぜですか？Apr 19, 2025 am 09:50 AM

時々、議論は型付けされたJavaScriptの価値について燃え上がります。「もっとテストを書くだけです！」対戦相手を叫ぶ。「ユニットテストをタイプに置き換えてください！」

GitのグラフィカルユーザーインターフェイスApr 19, 2025 am 09:46 AM

Lemmeは、最近のGit Guiの主要なプレーヤーのように見えるものをまとめています。

自分の怠zyなロードを転がすためのヒントApr 19, 2025 am 09:44 AM

「怠zyな読み込みを使用できる」と聞いたことがあるかもしれません（または電話を発行しました！特に重いウェブページをスリムにする方法を探しているとき。

CSS 2019調査の3つの予測Apr 19, 2025 am 09:43 AM

CSS状態のような開発者調査を実行することは、マルチステージプロセスです。まず、データを収集する必要があります。次に、使用可能な形状に処理します。

最後に...最終的に約束の投稿Apr 19, 2025 am 09:39 AM

「JavaScriptの約束で最終的に発砲するのはいつですか？」これは私が最近のワークショップで尋ねられた質問であり、私は何かをクリアするために少し投稿を書くと思いました

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。