Pure CSS3 はページサークルローディングアニメーションの特殊効果を実現します

yulia
リリース: 2019-11-30 16:36:14
オリジナル
11221 人が閲覧しました

インターネット速度が低いときに Web サイトを開いたり、ビデオを視聴したりすると、ページの読み込みが非常に遅くなります。このとき、通常、ユーザーに「ページを読み込んでいます。お待ちください」というメッセージが表示されます。回り続ける円。 HTML と CSS を学習している友人の皆さん、CSS3 を使用して円を読み込むアニメーション効果を実現できますか?この記事では、純粋な CSS3 で実装されたサークル (ローディング) ローディング アニメーションの特殊効果を紹介します。興味のある方は参考にしてください。

CSS3 を使用して円読み込み効果を作成するには、アニメーション、キーフレーム、境界半径フィレットなど、CSS3 の多くの属性を使用する必要があります。これらの属性についてよくわからない場合は、 PHP 中国語 Web サイト 関連記事、または CSS3 ビデオ チュートリアル にアクセスしてください。

次に、HTML と CSS を使用してページ サークル読み込みアニメーションを作成する方法を詳しく紹介します。

HTML 部分:

ページ内に div を作成します。アニメーションをロードする円を配置し、CSS スタイルの設定を容易にするために div にクラス名を付けます。 具体的なコードは次のとおりです。

<body>
  <h3>CSS圆圈加载样式</h3>  
  <div class="loading"></div>
</body>
ログイン後にコピー

CSS 部分:

最初に、 div の長さと高さを 120px に設定し、次に border-radius: を 50% に設定して円形にし、border: 16px Solid #f3f3f3 を使用して円の幅と色を設定し、最後に境界線を介してスクロール可能な部分を設定します。最上位の属性。基本的なスタイルが完成したら、CSS3 のアニメーションを使用して無限ループで回転させます。具体的なコードは次のとおりです。

.loading {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    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);
    }
   }
ログイン後にコピー

注: -webkit- および -ms- プレフィックスは、ブラウザの互換性を確保するために、アニメーションと変換属性をサポートしていないものを追加する必要があります。

レンダリング:

Pure CSS3 はページサークルローディングアニメーションの特殊効果を実現します

上記では、円 (読み込み) 読み込みアニメーションを実現するための純粋な CSS3 の特殊効果について説明しました。もっと詳しく知りませんでした。この記事が役立つことを願っています。

さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています: js 特殊効果コレクション

その他の関連チュートリアルについては、最新バージョンの にアクセスしてください。 CSS3 リファレンス マニュアル

以上がPure CSS3 はページサークルローディングアニメーションの特殊効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート