Animation zum Laden von CSS3-Lernseiten (2)

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.

Ich habe im vorherigen Artikel [Animation zum Laden von CSS3-Lernseiten (1) ] vier CSS3-Ladeanimationen geteilt, und wir werden heute fortfahren (der Titel wird vom vorherigen Mal fortgesetzt).

Bitte beachten Sie: Einige der Keyframe-Animationen im Code verwenden lineare Kurven, während andere Beschleunigungskurven verwenden. Ersteres wird mit konstanter Geschwindigkeit ausgeführt und die gesamte Animation wird mit fester Geschwindigkeit ausgeführt. Letzteres verfügt über eine Beschleunigungs- und Verzögerungsphase, die zu Beginn der Animation beschleunigt und langsamer wird, wenn die Animation kurz vor dem Ende steht (z. B. Wenn ich eine Animation auf 50 % einstelle, beginnt die Animation langsamer zu werden, wenn sie 50 % erreicht, und wenn sie 50 % überschreitet, beginnt sie sich zu beschleunigen, was sich in einem kurzen Verweileffekt auf der Animation widerspiegelt Seite. Effekte sieben und acht sind die offensichtlichsten)

5. Effekt fünf

Der Effekt des Balls beim Treppensteigen, das ist der erste Effekt, den ich gesehen habe. Ich dachte, es wäre etwas kompliziert, aber nachdem ich es geschrieben hatte, dachte ich, es sei nicht so schwierig.

Positionieren Sie zunächst die Treppe in der oberen rechten Ecke, führen Sie eine Bewegungsanimation von rechts oben nach links unten aus und legen Sie den Animationsverzögerungswert für jede Treppe fest (ich habe hier drei Treppen mit einer Gesamtdauer verwendet). von 1,8 s, Animation – Die Verzögerungswerte betragen 0 s, -0,6 s bzw. -12 s)

{animation: step_mv 1.8s linear infinite;}<br>@keyframes step_mv {<br>      0%{<br>        right: 0;<br>        top: 0;<br>        opacity: 0.6;<br>      }<br>      50%{<br>        opacity: 1;<br>      }<br>      100%{<br>        right: 100%;<br>        top: 100%;<br>        opacity: 0.6;<br>      }<br>    }<br>

Zweitens bestimmen Sie den Kontaktpunkt zwischen dem Ball und der Treppe. Der Ball wird diesen Kontaktpunkt verwenden Ändern Sie gleichzeitig den Anstieg, die Breite und Höhe während des Abstiegs, damit der Ball realistischer schlägt. Die Bewegungszeit der Ballanimation entspricht genau der Verzögerungszeit der Treppenanimation, um sicherzustellen, dass der Ball jede Treppe berühren kann.

{animation: jump .6s 0s ease infinite,jump_S .6s 0s ease infinite;}<br>@keyframes jump {<br>      50%{<br>        top: 60%;<br>      }<br>    }<br>    @keyframes jump_S {<br>      5%{<br>        height: 25px; //下降过程<br>        width: 15px;<br>      }<br>      54%{<br>        height: 20px;//到达底部<br>        width: 20px;<br>      }<br>      55%{<br>        height: 25px;//上升过程<br>        width: 15px;<br>      }<br>      98%{<br>        height: 20px;//到达顶点<br>        width: 20px;<br>      }<br>    }<br>

6. Wirkung 6

Dieser Effekt ist relativ einfach.

Ein Rechteck p, legen Sie den Rand und die abgerundeten Ecken fest und stellen Sie die Farbe eines beliebigen Randes auf Vererbung ein (d. h. border-left/bottom/top/right-color:transparent);

Auf diese Weise hat das übergeordnete Element keine Randfarbe, sodass der Rand auf dieser Seite farblos ist und einen Kreis mit einer Lücke bildet. Als nächstes stellen Sie einfach die Rotationsanimation ein und alles ist in Ordnung. (Der Code wird nicht veröffentlicht)

7. Effekt 7

Die Herstellung dieser Effektform ist die gleiche wie bei der vorherigen Methode, außer dass dieses Mal ein zusätzlicher Rand hinzugefügt wird und sie immer noch gedreht wird. Ich werde nicht weiter ins Detail gehen und einfach zum Keyframe gehen Animationscode.

{animation: rotate_bors 2s ease infinite;}//大圆<br>{animation: rotate_bors 1s ease infinite;}//小圆@keyframes rotate_bors {<br>      50%{<br>        transform: rotateZ(180deg);<br>      }<br>      100%{<br>        transform: rotateZ(360deg);<br>      }<br>    }<br>

8. Effekt 8

Dieser Effekt ist auch sehr einfach. Ich werde nicht näher darauf eingehen, wie man den äußeren großen Kreis erstellt. Sie müssen nur die Größe des kleinen Kreises im Inneren ändern.

{animation: rotate_borw 1s linear infinite;}@keyframes rotate_borw {<br>      50%{<br>        width: 15px;<br>        height: 15px;<br>      }<br>    }<br>

9. Effekt 9

Legen Sie alle Bälle als Inline-Blockelemente fest, geben Sie dem übergeordneten Element text-align:center ein, um die Bälle horizontal zu zentrieren, und legen Sie die Linienhöhe fest, um die Bälle vertikal zu zentrieren. Als nächstes verwenden Sie eine Keyframe-Animation, um die Länge, Breite sowie den linken und rechten Rand des Balls zu ändern.

{animation: margin 1s linear infinite;}<br>    @keyframes margin {<br>      50%{<br>        margin:0 10px;<br>        width: 10px;<br>        height: 10px;<br>      }<br>    }<br>

Zehn, Wirkung zehn

Stellen Sie den Ball immer noch als Inline-Block ein, zentrieren Sie ihn einfach horizontal. Sie können den Rand festlegen, um den Abstand zwischen den Bällen anzupassen, und den TranslateY-Wert des Balls über Schlüsselbilder festlegen. (Die Verzögerung zwischen den einzelnen Bällen muss nicht gleichmäßig aufgeteilt werden, die Differenz kann verringert werden)

{animation: trans 1.2s ease infinite;}@keyframes trans {<br>      50%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      70%{<br>        opacity: 1;<br>        transform: translateY(30px);<br>      }<br>      100%{<br>        opacity: 0;<br>        transform: translateY(60px);<br>      }<br>    }<br>

(Fortsetzung folgt)

Das ist alles, was ich heute hier teile, 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 (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!