Beispiel für das Teilen des Wartens auf das Laden einer Animation in einer HTML5-Animation

Teilen von Beispielen für das Warten auf das Laden von Animationen in HTML5-Animationen

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

*{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 möchte ich den Fortschrittsbalkeneffekt laden, aber der gefälschte Fortschrittsbalken ist zu schlecht und es gibt wirklich keinen besonders guten Weg um das Bild zu beurteilen. Das fühlt sich immer wie ein Leck 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 vonBeispiel für das Teilen des Wartens auf das Laden einer Animation in einer HTML5-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!