Lassen Sie die Anmeldeseite des WeChat-Applets den dynamischen Effekt schwebender Wolken haben

Zusammenfassung: Es versteht sich von selbst, dass WeChat-Miniprogramme derzeit sehr beliebt sind, zumal das WeChat-Team in letzter Zeit viele Miniprogramme entwickelt hat, die bereits zuvor kritisiert wurden: Fuzzy-Suche, Miniprogramme in der Nähe usw. In letzter Zeit haben einige Internetnutzer ihre Freizeit genutzt, um mit kleinen Programmen einen dynamischen Anmeldeseiteneffekt zu erzielen. Schreiben wir also diesen Artikel über 51 kleine Programme ...

Es versteht sich von selbst, dass sich WeChat-Miniprogramme derzeit großer Beliebtheit erfreuen, zumal das WeChat-Team in letzter Zeit viele bereits kritisierte Miniprogramme entwickelt hat: Fuzzy-Suche, Miniprogramme in der Nähe usw. In letzter Zeit haben einige Internetnutzer ihre Freizeit genutzt, um Miniprogramme zu verwenden, um einen dynamischen Anmeldeseiteneffekt zu erzielen. In diesem Artikel wird hauptsächlich die Verwendung von WeChat-Miniprogrammen zum Erzielen eines Cloud-Floating-Anmeldeseiteneffekts vorgestellt Die relevanten Informationen zu Animationseffekten werden an alle weitergegeben, die sie benötigen. Werfen wir einen Blick darauf.

Vorwort

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?

Wissenspunkte

Animation verstehen

Das Animationsattribut ist ein Abkürzungsattribut, das zum Festlegen von sechs Animationsattributen verwendet wird:

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.

Das obige ist der detaillierte Inhalt vonLassen Sie die Anmeldeseite des WeChat-Applets den dynamischen Effekt schwebender Wolken haben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!