Pure CSS3 はページサークルローディングアニメーションの特殊効果を実現します-CSSチュートリアル-php.cn

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

yulia

リリース： 2019-11-30 16:36:14

オリジナル

11264 人が閲覧しました

インターネット速度が低いときに 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 はページサークルローディングアニメーションの特殊効果を実現します