Was sind die Ladeanimationen?

Bevor wir beginnen, werfen wir einen Blick auf das Wissen: Mit der neuen Keyframe-Animation von CSS3 können viele Animationen implementiert werden. Mithilfe der Animationsverzögerung können wir die verzögerte Ausführung von Animationen steuern und so umfangreiche Effekte erzielen.

Wenn der Wert der Animationsverzögerung positiv ist, wird die Animation gegenüber dem Anfangszustand verzögert.

Wenn der Wert der Animationsverzögerung negativ ist, wird die Animation vorangetrieben Starten Sie die Ausführung ab dem Zustand, der diesem Wert entspricht (dem Absolutwert einer negativen Zahl).

(Das Effektbild ist möglicherweise nicht klar, bitte haben Sie Verständnis)

1. Der erste Effekt

Es gibt insgesamt 16 kleine Quadrate und ändern die Transparenz der Quadrate durch Keyframes >Stellen Sie für jedes Quadrat den Animationsverzögerungswert ein. Hier beträgt meine Gesamtanimationszeit 2 Sekunden und beträgt bei gleichmäßiger Aufteilung in 16 Quadrate 0,125 Sekunden. Der von mir festgelegte Animationsverzögerungswert beginnt also bei -1,875 Sekunden und erhöht sich mit der Differenz von 0,125 bis 0.

{animation: ball 2s 0s ease infinite;}
@keyframes ball {
      0%{
        opacity: 1;
      }
      50%{
        opacity: 1;
      }
      51%{
        opacity: 0;
      }
    }

Die Position der großen Kugel in der Mitte bleibt unverändert, und die drei auf der Seite Die kleinen Kugeln sind jeweils in drei Quadraten enthalten. Legen Sie die Position der kleinen Kugeln fest: {oben: 0; links: 0;} und stellen Sie das Quadrat so ein, dass es sich dreht, um diesen Schnittpunkt zu bilden.

Stellen Sie den Animationsprozess durch Keyframe-Animation ein (das Schreiben der Keyframe-Animation unten ist nicht die beste Methode) und legen Sie den Animationsverzögerungswert für jeden Ball fest, sodass sich die drei Bälle zu unterschiedlichen Zeitpunkten bewegen können von vorne.

Darüber hinaus müssen Sie auch den Z-Index-Wert für den übergeordneten Container der drei kleinen Kugeln durch Keyframe-Animation festlegen, um den visuellen Effekt der Drehung der kleinen Kugel zu erzielen um den großen Ball herum.

{animation: turn_atom 1.5s 0s ease infinite;}
@keyframes turn_atom {
      0%{
        height:25px;
        width: 25px;
        top: 0;
        left: 0;
      }
      50%{
        height: 20px;
        width: 20px;
        top: 60px;
        left: 60px;
      }
      51%{
        height: 15px;
        width: 15px;
        top: 60px;
        left: 60px;
      }
      100%{
        height: 20px;
        width: 20px;
        top: 0;
        left: 0;
      }
    }

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }

Dieser Effekt ist relativ einfach, ändern Sie einfach die Größe und Transparenz des Balls (die Transparenz sowie die Breite und Höhe des Balls werden zunächst definiert).

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }

Zunächst sind die vier Bälle an der gleichen Position positioniert, und der linke Wert des Balls und die Größe des Balls können über Keyframes geändert werden.

{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;}
@keyframes r_ball {
      50%{
        left: 100%;
      }
    }
    @keyframes r_ballZ {
      25%{
        transform: scale(0.5);
      }
      50%{
        transform: scale(1);
      }
    }

Das obige ist der detaillierte Inhalt vonWas sind die Ladeanimationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!