CSS3 を使用してページ サークル読み込みアニメーションを作成する方法 (コード付き)

ページを開くときに、ページが読み込まれる状況によく遭遇します。フロントエンド エンジニアとして、CSS3 を使用してページ読み込みアニメーション効果を実現する方法をご存知ですか?この記事では、クールなサークル読み込みアニメーション効果のコードを紹介します。これは一定の参考価値があるので、興味のある友人は参照してください。

ページ読み込みアニメーションを作成するには、アニメーション属性、位置決め、境界半径フィレット、変換属性など、CSS3 の多くの属性を使用する必要があります。よくわからない場合は、以前の記事を参照してください。これらは基本であり、習得する必要があります。 例: 円の読み込みアニメーション効果を作成します。読み込み時に、円のサイズが小さいものから大きいものに変わり、色が明るいものから暗いものに変わります。

HTML 部分:

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>

CSS 部分:

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }

レンダリング:

上記の共有

CSS3 コードは、プロジェクトで使用されるページ読み込みアニメーション効果を実現します。たくさんあります。直接使用できます。他の効果を作成できるかどうかを自分で試してみてください。この記事が役立つことを願っています。関連チュートリアルの詳細については、

CSS ビデオ チュートリアル
をご覧ください。

以上がCSS3 を使用してページ サークル読み込みアニメーションを作成する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。