En attente de production d'effets d'animation lors du chargement de HTML5-Tutoriel H5-php.cn

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

巴扎黑

Libérer： 2017-08-07 15:04:32

original

3314 Les gens l'ont consulté

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>

Copier après la connexion

  *{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)}
    }

Copier après la connexion

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

Copier après la connexion

 *{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);}
    }

Copier après la connexion

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>

Copier après la connexion

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!