CSS はクリエイティブなページ読み込みアニメーション効果を実装します-CSSチュートリアル-php.cn

CSS はクリエイティブなページ読み込みアニメーション効果を実装します

yulia

リリース： 2018-10-20 10:48:38

オリジナル

3688 人が閲覧しました

Web サイトを閲覧しているときに、「読み込み中です。しばらくお待ちください」というページに遭遇したことはありますか? フロントエンドエンジニアとして、CSS を使用してページ読み込み (読み込み) アニメーション効果を作成できますか?この記事では、クリエイティブなページの読み込み (読み込み) アニメーションコードを紹介します。興味のある友人は参照してください。

クリエイティブページの読み込み (読み込み) アニメーションを作成するには、CSS でアニメーションアニメーション、変換属性などの多くの属性を使用する必要があります。よくわからない場合は、次の関連情報を参照してください。 PHP 中国語 Web サイトの記事、または CSS ビデオチュートリアルにアクセスしてください。

インスタンスの説明: div を使用して、読み込みプロセス中に正方形が Y 軸に沿って反転し、次に X 軸に沿って反転します。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .spinner {
    width: 60px;
    height: 60px;
    background-color: #67CF22;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
   }
   
   @-webkit-keyframes rotateplane {
    0% {
     -webkit-transform: perspective(120px)
    }
    50% {
     -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
     -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
   }
   
   @keyframes rotateplane {
    0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
   }
  </style>
 </head>
 <body>
  <div class="spinner"></div>
 </body>
</html>

ログイン後にコピー

効果図に示すように:

CSS はクリエイティブなページ読み込みアニメーション効果を実装します