HTML+CSSでページロード（読み込み）アニメーション効果を実現-CSSチュートリアル-php.cn

HTML+CSSでページロード（読み込み）アニメーション効果を実現

yulia

リリース： 2018-10-16 17:15:49

オリジナル

9853 人が閲覧しました

ページの閲覧中にページが読み込まれる状況に遭遇したことがありますか? フロントエンド開発者として、CSS3 と HTML を使用してページ読み込みアニメーション効果を作成する方法を知っていますか?この記事では、非常にシンプルで実用的な CSS3 サークル読み込みアニメーション効果コードを紹介します。これは一定の参考価値があるので、興味のある友人は参照してください。

読み込み読み込みアニメーションを実装するには、アニメーションアニメーション、表示、境界線の半径の丸い角、変換属性など、CSS3 で多くの属性と HTML タグを使用する必要があります。よくわからない場合は、以前に紹介した私の以前の記事を確認するか、CSS3 ビデオチュートリアルにアクセスしてください。

デモの例: 3 つの円を使用してページ読み込みアニメーション効果を作成します。円は非表示から表示、そして非表示に変わります。具体的なコードは次のとおりです。

HTML 部分:

<div class="spinner">
     <div class="bounce1"></div>
    <div class="bounce2"></div>
     <div class="bounce3"></div>
</div>

ログイン後にコピー

CSS3 部分:

.spinner {
     margin: 100px auto 0;
     width: 150px;
     text-align: center;
   }
    
   .spinner > div {
     width: 30px;
     height: 30px;
     background-color: #67CF22;
    
     border-radius: 100%;
     display: inline-block;
     -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
     animation: bouncedelay 1.4s infinite ease-in-out;
     /* Prevent first frame from flickering when animation starts */
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
    
   .spinner .bounce1 {
     -webkit-animation-delay: -0.32s;
     animation-delay: -0.32s;
   }
    
   .spinner .bounce2 {
     -webkit-animation-delay: -0.16s;
     animation-delay: -0.16s;
   }
    
   @-webkit-keyframes bouncedelay {
     0%, 80%, 100% { -webkit-transform: scale(0.0) }
     40% { -webkit-transform: scale(1.0) }
   }
    
   @keyframes bouncedelay {
     0%, 80%, 100% {
       transform: scale(0.0);
       -webkit-transform: scale(0.0);
     } 40% {
       transform: scale(1.0);
       -webkit-transform: scale(1.0);
     }
   }

ログイン後にコピー

効果は図に示すとおりです:

HTML+CSSでページロード（読み込み）アニメーション効果を実現