En attente de production d'effets d'animation lors du chargement de HTML5

Cet article vous présente la solution parfaite pour HTML5 en attente de chargement de l'effet d'animation via un exemple de code. Les amis intéressés peuvent s'y référer

Sans plus tarder, je publierai directement le code pour vous. détails Le code ressemble à ceci :

<p class="loading">
     <p>100<span></span></p>
</p>

  *{margin:0;padding:0;}
    .loading{
          height:100%;width:100%;position:fixed;background:rgba(255,255,255,1);
    }
    .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:160px;width:160px;text-align: center;line-height:160px;font-size: 30px;color:#f00;}
    .loading p span{position:absolute;display:block;height:140px;width:140px;margin:10px;border-radius:50%;-webkit-box-shadow:0 2px 3px rgba(102,197,37,0.8); animation:loading ease 1s infinite;left:0;top:0;}
    @keyframes loading{
       0%{transform:rotate(0deg)}
       100%{transform:rotate(360deg)}
    }

<p class="loading">
     <p>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</p>
</p>

 *{margin:0;padding:0;}
    .loading{
          height:100%;width:100%;position:fixed;background:rgba(255,255,255,0.95);
    }
    .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:30px;width:120px;}
    .loading >p i{display: block;float:left;margin:0 5px; width:5px;height:30px;background:#f00;transform:scaleY(0.3);
                   animation:loading 1s ease infinite alternate;
    }
.loading >p i:nth-child(2){animation-delay:0.1s;}
.loading >p i:nth-child(3){animation-delay:0.2s;}
.loading >p i:nth-child(4){animation-delay:0.3s;}
.loading >p i:nth-child(5){animation-delay:0.4s;}
    @keyframes loading{
           0,40%,100%{transform:scaleY(0.3);}
           20%{transform:scaleY(1);}
    }

En fait, ce que je veux faire, c'est charger l'effet de la barre de progression, mais la fausse barre de progression l'est aussi mauvais, et il n’y a pas de véritable barre de progression. C’est un moyen particulièrement efficace de juger l’image, qui donne toujours l’impression de fuir.

Voici le code, il existe une solution parfaite.

<script>
    document.onreadystatechange=function(){
      if(document.readyState==&#39;complete&#39;){
         $(&#39;.loading&#39;).fadeOut();
      }
    }
</script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!