Beispiel für das Teilen des Wartens auf das Laden einer Animation in einer HTML5-Animation-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-07-27 16:20:42

Original

2589 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

    }

Nach dem Login kopieren

<p class="loading">
    
     <p>

  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i></p></p>

Nach dem Login kopieren

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

    }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!