Animation zum Laden von CSS3-Lernseiten (3)

In diesem Artikel werden 6 Arten von 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.

Im vorherigen Artikel [Animation zum Laden von CSS3-Lernseiten (2) ] habe ich 6 weitere CSS3-Ladeanimationen geteilt. Ich werde sie heute weiterhin teilen (der Titel ist eine Fortsetzung des vorherigen). Zeit). Siehe die Bilder Nicht wirklich.

Elf, Effekt Elf

Die In vier Quadraten p sind jeweils vier kleine Kugeln enthalten (oben: 0; links: 0), sodass sich die kleinen Kugeln jeweils an den vier Ecken befinden Verwenden Sie die Keyframe-Animation, um die kleinen Kugeln zu steuern. Der Ball bewegt sich zwischen der aktuellen Position und der Position nahe dem Mittelpunkt hin und her.

{animation: flor_move 1s 0s ease infinite;}
@keyframes flor_move {      50%{
        top: 25px;
        left: 25px;
      }
    }

Es bleibt noch ein Rotationseffekt übrig, der dem übergeordneten Element überlassen bleibt des Quadrats p

{animation: flor_rote 2s 0s ease infinite;}@keyframes flor_rote {
      25%{
        transform: rotateZ(90deg);
      }
      50%{
        transform: rotateZ(180deg);
      }
      75%{
        transform: rotateZ(270deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

Zwölf, Effekt zwölf

Dieser Effekt ist nicht schwer zu erreichen. Korrigieren Sie die Position jedes kleinen Balls und ändern Sie die Transparenz des kleinen Balls (jeder kleine Ball muss eine andere Animationszeit einstellen)

@keyframes mar_ligt {
      50%{
        opacity: 0.4;
      }
    }

Dreizehnter Effekt dreizehnter

Es gibt noch neun kleine Kugeln, aber die Größe von Die kleinen Kugeln wurden hier geändert, um den durch die Größenänderung verursachten Satz zu verhindern. Es ist verwirrend, daher ist jede Kugel in p mit einer festen Breite und Höhe enthalten, sodass die Kugel immer in der Horizontalen und Vertikalen zentriert ist Richtungen von p. Auf diese Weise können Sie die Größe des Balls sicher ändern (jeder Ball ist weiterhin auf eine andere Animationszeit eingestellt)

@keyframes mar_ligts {
      50%{
        transform: scale(.5);
        opacity: 0.4;
      }
    }

Vierzehn, Effekt Vierzehn

Billardeffekt, vier kleine Kugeln sind in der Mitte horizontal und vertikal angeordnet, die beiden kleinen Kugeln in der Mitte bewegen sich nicht , und die kleinen Kugeln auf der linken und rechten Seite Der Ball bewegt sich hin und her zu beiden Seiten (achten Sie einfach auf den Zeitunterschied der Bewegung).

{animation: poolball_l 1s .5s linear infinite;}   //左边的小球
{animation: poolball_r 1s 0s linear infinite;}    //右边的小球@keyframes poolball_l {
      25%{
        transform: translateX(-100%);
      }
      50%{
        transform: translateX(0);
      }
    }
    @keyframes poolball_r {
      25%{
        transform: translateX(100%);
      }
      50%{
        transform: translateX(0);
      }
    }

Fünfzehn, Wirkung fünfzehn

Dies ist ein sehr häufiger Effekt. Um zu verhindern, dass das Seitenlayout aufgrund von Änderungen in der Größe des Balls gestört wird, wird außerhalb des Balls eine Schicht aus p mit fester Breite und Höhe hinzugefügt.

Außerdem ist für jeden Ball eine Animationsverzögerung eingestellt

{animation: size_change 1.2s linear infinite;}@keyframes size_change {
      20%{
        width: 0;
        height: 0;
      }
      40%{
        width: 0;
        height: 0;
      }
      50%{
        width: 20px;
        height: 20px;
      }
    }

Sechzehn, Effekt Sechzehn

Fünf kleine Kugeln, zentrieren Sie sie einfach horizontal, verwenden Sie Ränder, um den Abstand zwischen den Kugeln zu vergrößern, und ändern Sie die Übersetzung der Kugeln durch Keyframe-Animation sowie die Breite. Höhe und Transparenz.

Die anfängliche Breite und Höhe des Balls beträgt 15 Pixel und die Transparenz beträgt 0,6.

{animation: flip_ballP 1.2s ease infinite,flip_ballS 1.2s ease infinite;}@keyframes flip_ballP {
      50%{
        transform: translateY(60px);
      }
    }
    @keyframes flip_ballS {
      50%{
        height: 15px;
        width: 15px;
        opacity: 0.6;
      }
      75%{
        height: 20px;
        width: 20px;
        opacity: 1;
      }
    }

Fortsetzung folgt!

Ich werde es heute hier teilen, es wird später noch mehr geben. Ich hoffe, dass es für alle beim Lernen 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 (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!