Das Frontend ist im Jahr 2017 beliebt, WeChat-Applet, Weex Reactnative, sogar Alipay hat ein Miniprogramm gestartet. Ich habe immer das Gefühl, dass dies der Rhythmus der einheimischen Zerstörung ist, also werde ich den Trend nutzen, um im Falle einer Welle einzusteigen.

Das obige Rendering (GIF-Animation)

Als ich dieses Hintergrundbild sah, verspürte ich sofort eine Zwangsstörung, fragte ich mich Warum bewegten sich die Wolken nicht, und so begann eine Welle des Unruhens?

Wert Beschreibung „animation-name“ gibt den Keyframe an, der an den Selektor gebunden werden muss. Name „animation-duration“ gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden. „animation-timing-function“ gibt die Geschwindigkeitskurve der Animation an. „animation-delay“ gibt an die Zeit, bevor die Animation beginnt. Verzögerung Animationiterationsanzahl gibt an, wie oft die Animation abgespielt werden soll. Animationsrichtung gibt an, ob die Animation der Reihe nach in umgekehrter Reihenfolge abgespielt werden soll.

Es gibt viele Methoden, die man kennen muss, um zu übersetzen

, dieser Artikel verwendet hauptsächlich 2.
+ translator3d(x,y,z) definiert die 3D-Skalierungstransformation.
+ rotate3d(x,y,z,angle) definiert die 3D-Rotation.

translate3d(1,1,0)
Sie können es als (links und rechts, oben und unten, Größe) Änderungen verstehen.
rotate3d(1,1,0,45deg)

Implementierung

1. Die beiden Wolken sind bis auf ihre Größe und Anfangsposition gleich . .

.cloud {

Position: absolut;

Z-Index: 3;

width:99px;height:64px; oben: 0;

unten: 0;

Animation: Wolke 5s linear unendlich;

}

@keyframes cloud {

from {

transform: translator3d(-125rpx, 0, 0);

}

bis {

transform: translator3d(180rpx, 0, 0);

}

}

wobei rpx ein einzigartiges Attribut von WeChat ist und nicht von der Bildschirmgröße beeinflusst wird, ähnlich zur DP-Einheit in Android. Keyframes bewegen sich mit konstanter Geschwindigkeit. Aus dem CSS können Sie ersehen, dass nur die linke und rechte Richtung geändert werden.
2. Ursprünglich wollte ich dem Avatar einen hängenden Korb hinzufügen, damit er wie eine Schaukel schwingt, aber es hat einfach nicht geklappt.

Der Code lautet wie folgt:

@Keyframes Bild {  0% {    transform: translate3d(0, 20rpx, 0) drehen (-15Grad);  }  15 % {    transform: translate3d(0, 0rpx, 0) drehen (25Grad);  }  36 % {    transform: translate3d(0, -20rpx, 0 ) drehen (-20Grad);  }  50 % {    transform: translate3d(0, -10rpx, 0 ) drehen (15Grad);  } 68 % { transform: translate3d(0, 10rpx, 0) drehen (-25Grad); } 85 % { transform: translate3d(0, 15rpx, 0) drehen (15Grad); 100 % { transform: translate3d(0, 20rpx, 0) drehen (-15Grad); }}Ich habe nicht erwartet, dass Keyframes nicht nur von bis, sondern auch den Prozentsatz unterstützen, was gut ist. Solange Sie die hierarchische Beziehung, die Animationsdauer und die Transparenz steuern, können Sie hier ein Cloud-Floating erreichen. Zusammenfassung

Ich muss sagen, dass CSS immer noch viele Animationen und Spezialeffekte enthält, die die Seite schöner machen können. Komplexere Animationen können natürlich nur aktualisiert werden, wenn die Möglichkeit besteht.