CSS3-Animationsimplementierung des Leseeffekts

Ich habe letztes Mal vier CSS3-Ladeanimationen geteilt, und wir machen heute weiter (der Titel setzt sich vom vorherigen Mal fort).

Online-Demo: http://liyunpei.xyz/loading.html (kontinuierlich aktualisiert)

Bitte beachten Sie: Einige der Keyframe-Animationen im Code verwenden eine lineare Kurve , und einige verwenden eine Ease-Kurve. 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. Als ich diesen Effekt zum ersten Mal sah, dachte ich, er wäre etwas kompliziert, aber nachdem ich ihn geschrieben hatte, dachte ich, dass das nicht der Fall sei 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)

{:;:;:;
      }{:;
      }{:;:;:;
      }

Zweitens bestimmen Sie den Kontaktpunkt zwischen dem Ball und der Treppe. Der Ball verwendet diesen Kontaktpunkt als niedrigsten Maßstab. Gleichzeitig führt die Änderung der Breite und Höhe des Balls während seines Aufstiegs und Abfalls dazu, dass 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;}@keyframes jump {  50%{
        top: 60%;
      }}
    @keyframes jump_S {  5%{
        height: 25px; //下降过程width: 15px;
      }  54%{height: 20px;//到达底部width: 20px;
      }  55%{height: 25px;//上升过程width: 15px;
      }  98%{height: 20px;//到达顶点width: 20px;
      }}

6. Wirkung 6

Dieser Effekt ist relativ einfach.

Ein rechteckiges Div, legen Sie den Rand und die abgerundeten Ecken fest und stellen Sie die Farbe eines der Ränder 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 näher darauf eingehen und gehen Sie einfach zum Keyframe-Animationscode.

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

8. Wirkung 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 {  50%{
        width: 15px;height: 15px;
      }}

9. Wirkung 9

Legen Sie alle Bälle als Inline-Blockelemente fest, geben Sie dem übergeordneten Element text-align: center ein, um den Ball horizontal zu zentrieren, und legen Sie die Linienhöhe fest, um den Ball 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;}@keyframes margin {  50%{
        margin:0 10px;width: 10px;height: 10px;
      }}

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 Wert der Bälle über Keyframes festlegen übersetzenY. (Die Verzögerung zwischen den einzelnen Bällen muss nicht gleichmäßig aufgeteilt werden, der Unterschied kann verringert werden)

(Fortsetzung folgt)

Das obige ist der detaillierte Inhalt vonCSS3-Animationsimplementierung des Leseeffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!