So verwenden Sie CSS3, um eine Animation zum Laden von Seitenkreisen zu erstellen (mit Code)

Wenn Sie eine Seite öffnen, kommt es häufig vor, dass die Seite geladen wird. Wissen Sie als Front-End-Ingenieur, wie man mit CSS3 Animationseffekte beim Laden von Seiten erzielt? In diesem Artikel wird der Code für einen coolen Kreislade-Animationseffekt mitgeteilt. Er hat einen gewissen Referenzwert und interessierte Freunde können einen Blick darauf werfen.

Das Erstellen von Animationen zum Laden von Seiten erfordert die Verwendung vieler Attribute in CSS3, wie z. B. Animationsattribute, Positionierung, Randradiusverrundungen, Transformationsattribute usw. Wenn Sie sich nicht sicher sind, können Sie sich meine vorherigen Artikel ansehen zuvor eingeführt, oder besuchen Sie das CSS3-Video-Tutorial Dies sind die Grundlagen und müssen beherrscht werden.

Beispiel: Erstellen Sie einen Kreislade-Animationseffekt. Die Größe des Kreises ändert sich beim Laden von klein nach groß und die Farbe ändert sich von hell nach dunkel. Der spezifische Code lautet wie folgt:

HTML-Teil:

<div class="loader">
      <div class="loading">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>     
      </div>
  </div>

CSS-Teil:

.loader{
       width: 300px;
       border: 1px solid #ccc;
       height: 200px;
       display: flex;
       box-sizing: border-box;
       align-items: center;
       justify-content: center;
   }   
   @-webkit-keyframes loading{
       50%{
           transform: scale(0.4);
           opacity: 0.3;
       }
       100%{
           transform: scale(1);
           opacity: 1;
       }
   }
   .loading{
       position: relative;
   }
   .loading i{
       display: block;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       position: absolute;
       background: #333;
   }
   .loading i:nth-child(1){
       top: 25px;
       left: 0;
       -webkit-animation: loading 1s ease 0s infinite;
   }
   .loading i:nth-child(2){
       top: 17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.12s infinite;
   }
   .loading i:nth-child(3){
       top: 0;
       left: 25px;
       -webkit-animation: loading 1s ease 0.24s infinite;
   }
   .loading i:nth-child(4){
       top: -17px;
       left: 17px;
       -webkit-animation: loading 1s ease 0.36s infinite;
   }
   .loading i:nth-child(5){
       top: -25px;
       left: 0;
       -webkit-animation: loading 1s ease 0.48s infinite;
   }
   .loading i:nth-child(6){
       top: -17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.6s infinite;
   }
   .loading i:nth-child(7){
       top: 0;
       left: -25px;
       -webkit-animation: loading 1s ease 0.72s infinite;
   }
   .loading i:nth-child(8){
       top: 17px;
       left: -17px;
       -webkit-animation: loading 1s ease 0.84s infinite;   
   }

Rendering:

Der oben geteilte CSS3-Code soll erreicht werden Es gibt viele im Projekt verwendete Animationseffekte zum Laden von Seiten. Sie können sie direkt verwenden. Ich hoffe, Sie können sie selbst ausprobieren, um zu sehen, ob Sie andere Effekte erstellen können. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um eine Animation zum Laden von Seitenkreisen zu erstellen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!