So erzielen Sie mit HTML5 den Effekt des Wartens auf das Laden der Animation

Der detaillierte Code lautet wie folgt:

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

Eigentlich das, was ich will Dies ist der Effekt eines Ladefortschrittsbalkens, und es gibt keine besonders gute Möglichkeit, dies zu tun. Die Beurteilung von Bildern fühlt sich immer relativ niedrig an.

Das ist der Code, es gibt eine perfekte Lösung.

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

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit HTML5 den Effekt des Wartens auf das Laden der Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!