Animation zum Laden von CSS3-Lernseiten (1)

In diesem Artikel werden vier CSS3-Animationen zum Laden von Seiten vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Vor zwei Tagen habe ich einige gute Ladeanimationseffekte von einer Website gesehen. Sie waren in reinem CSS3 geschrieben, also habe ich versucht, sie entsprechend den Effekten zu schreiben.

Bevor wir beginnen, lassen Sie uns ein wenig Wissen durchgehen: 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 reichhaltige Effekte erzielen.

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

Wenn der Wert der Animationsverzögerung eine negative Zahl ist, wird die Animation verzögert Vorwärts vom Wert (Absolutwert einer negativen Zahl) Der entsprechende Status startet die Ausführung.

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

Der erste Effekt

Insgesamt 16 kleine Quadrate, positionieren Sie die Position und ändern Sie die Transparenz des Quadrats durch Schlüsselbilder

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

Stellen Sie hier den Animationsverzögerungswert für jedes Quadrat ein 2 s, die gleichmäßige Aufteilung von 16 Quadraten beträgt 0,125 s, daher beginnt der von mir festgelegte Wert für die Animationsverzögerung bei -1,875 s und erhöht sich mit einer numerischen Differenz von 0,125, bis er 0 erreicht.

2. Der zweite Effekt

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 Kugel 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 geht von vorne vorbei.

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

Darüber hinaus müssen Sie den Z-Index-Wert für den übergeordneten Container der drei kleinen Kugeln durch Keyframe-Animation festlegen, um den visuellen Effekt der kleinen Kugeln zu erzielen, die sich um die große Kugel drehen.

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

3. Der dritte Effekt

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

4. Der vierte Effekt

Zunächst sind die vier Bälle an der gleichen Position positioniert und der linke Wert des Balls sowie 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 ist alles für den Moment, ich werde später noch mehr hinzufügen. (Fortsetzung folgt)

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Tutorial !

Das obige ist der detaillierte Inhalt vonAnimation zum Laden von CSS3-Lernseiten (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!