Animation zum Laden von CSS3-Lernseiten (4)

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 [Seitenladeanimation zum Erlernen von CSS3 (3) ] habe ich 6 weitere CSS3-Ladeanimationen geteilt, die ich heute weiter teilen werde (der Titel wird von der fortgesetzt vorheriges Mal). Siehe das Bild.

Siebzehn, Wirkung siebzehn

Drei Kleine Kugeln, vertikal zentriert, mit großem Abstand, ändern Sie einfach nacheinander den translatorY-Wert der kleinen Kugeln.

@keyframes leap_ball {
      50% {
        transform: translateY(60px);
      }
    }

Achtzehn, Effekt achtzehn

Drei kleine Kugeln, alle in horizontaler und vertikaler Richtung zentriert, verwenden den äußeren Rand, um den Abstand zwischen den kleinen Kugeln zu vergrößern. Dadurch kreisen die beiden kleinen Kugeln links und rechts um die mittlere Kugel, dann können wir direkt Lassen Sie das übergeordnete Element der Kugel rotieren, um den umgebenden Effekt der Kugeln auf beiden Seiten zu erzielen (wenn sich das übergeordnete Element dreht, ist aufgrund der runden Form nicht zu erkennen, dass sich die Kugel in der Mitte dreht, und die Position in der Mitte Optisch hat sich die mittlere Kugel in keiner Weise verändert.

@keyframes wind_ball {
      50% {
        transform: rotateZ(180deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

Neunzehn, Wirkung Neunzehn

Insgesamt gibt es fünf Bälle, die von jedem Ball ausgeführt werden, aber die Animationsverzögerungszeit jedes Balls ist unterschiedlich, wodurch die Positionen der Bälle unterschiedlich sind und ein einheitlicher Startpunkt entsteht . (Hier habe ich die fünf Kugeln ganz rechts positioniert)

{animation: cool_ballP 2s linear infinite, cool_ballS 2s linear infinite;}@keyframes cool_ballP {
      80% {
        right: 75%;    //到达终点，开始返回起点      }
    }
@keyframes cool_ballS {
      80% {               //到达终点
        top: 25%;
        width: 20px;
        height: 20px;
      }
      81% {               //开始返回起点，长度变大，宽度变小，模拟移动产生的形变
        top: 0;
        width: 25px;
        height: 15px;
      }
      99% {               //到达起点
        top: 0;
        width: 25px;
        height: 15px;
      }
       100% {             //恢复初始
        width: 20px;
        height: 20px;
      } 
    }

Zwanzig, Effekt zwanzig

Insgesamt acht kleine Kugeln, in einem Kreis positioniert, ändern Sie einfach die Breite und Höhe der kleinen Kugeln (um die Änderungen der kleinen Kugeln beizubehalten, sind die kleinen Kugeln Die Mitte des Kreises ist die Basis.)

{animation: load_ball 1.6s linear infinite;}@keyframes load_ball {
      50% {
        height: 0;
        width: 0;
      }
      80% {
        height: 0;
        width: 0;
      }
    }

(50 %–80 % des Balls behalten die Breite und Höhe bei 0, wodurch ein halb sichtbarer und halb verdeckter Effekt entsteht)

II 11. Wirkung 21

Insgesamt drei kleine Kugeln, Die Bewegungsbahn jedes kleinen Balls ist immer noch derselbe. Hier habe ich die Mittelpunkte der drei kleinen Bälle vertikal oben und horizontal in der Mitte positioniert und sie dann in drei Schritten bewegt, zuerst in die untere rechte Ecke und dann in die untere linke Ecke und kehrte schließlich zum Ausgangspunkt zurück.

(Zum Zeitpunkt etwa in der Mitte jeder Phase wird die Transparenzänderung hinzugefügt)

@keyframes triangle_ball {
      16% {
        opacity: .6;
      }
      33% {
        left: 100%;
        top: 100%;
        opacity: 1;
      }
      50% {
        opacity: .6;
      }
      66% {
        left: 0;
        top: 100%;
        opacity: 1;
      }
      83% {
        opacity: .6;
      }
      99% {
        top: 0;
        left: 50%;
        opacity: 1;
      }
    }

Zweiundzwanzig, Effekt zweiundzwanzig

Dies ähnelt einem rotierenden Zahnrad. Der Schlüssel liegt darin, wie man die Form eines Zahnrads herstellt gibt: Der Rand wird in einen Kreis im Inneren umgewandelt, und der gepunktete Rand der Pseudoklasse wird in äußere Zacken umgewandelt. Je breiter der Rand der Pseudoklasse, desto spärlicher sind die Zacken und umgekehrt.

Nachdem die Zahnräder fertig sind, fehlt nur noch das kleine rotierende Gehäuse.

.gear_ball {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      display: inline-block;
      border: 4px #fff solid;
      position: relative;
    }

    .gear_ball:after {
      content: '';
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      top: -8px;
      left: -8px;
      border: 8px #fff dashed;
    }

Das heutige Teilen ist vorbei, es wird später eine weitere Welle geben und es wird mit Blumen enden. 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 (4). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!