Laissez la page de connexion de l'applet WeChat avoir l'effet dynamique des nuages ​​​​flottants

Résumé : Il va sans dire que les mini-programmes WeChat sont actuellement très populaires, d'autant plus que l'équipe WeChat a récemment développé de nombreux mini-programmes qui ont déjà été critiqués : recherche floue, mini-programmes à proximité, etc. Récemment, certains internautes ont utilisé leur temps libre pour utiliser de petits programmes pour obtenir un effet de page de connexion dynamique, écrivons donc cet article sur 51 petits programmes...

Il va sans dire que les mini-programmes WeChat sont actuellement très populaires, d'autant plus que l'équipe WeChat a récemment développé de nombreux mini-programmes qui ont déjà été critiqués : recherche floue, mini-programmes à proximité, etc. Récemment, certains internautes ont utilisé leur temps libre pour utiliser des mini-programmes pour obtenir un effet de page de connexion dynamique, utilisons donc 51 mini-programmes. Cet article présente principalement l'utilisation de mini-programmes WeChat pour obtenir une page de connexion flottante dans le cloud <.> Les informations pertinentes sur les effets d'animation sont partagées avec tous les amis qui en ont besoin peuvent s'y référer ci-dessous.

Avant-propos

Le front-end est populaire en 2017, applet WeChat, weex , réactif , même Alipay a lancé un mini programme. J'ai toujours l'impression que c'est le rythme de la destruction native, donc je profiterai de la tendance pour embarquer en cas de vague.

Le rendu ci-dessus (animation GIF)

Quand j'ai vu cette image de fond, j'ai immédiatement ressenti un trouble obsessionnel-compulsif, je me suis demandé pourquoi les nuages ​​n'ont pas bougé, alors une vague de problèmes a commencé.

Points de connaissance

Comprendre l'animation

L'attribut animation est un attribut d'abréviation utilisé pour définir six attributs d'animation :

Valeur Description animation-name spécifie l'image clé qui doit être liée au sélecteur Nom animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes. animation-timing-function spécifie la courbe de vitesse de l'animation animation-delay spécifie le temps avant le début de l'animation Delay animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée animation-direction spécifie si l'animation doit être jouée à l'envers à tour de rôle

Il existe de nombreuses méthodes pour savoir traduire

, cet article en utilise principalement 2.
+ translate3d(x,y,z) définit la transformation de mise à l'échelle 3D.
+ rotate3d(x,y,z,angle) définit la rotation 3D.

translate3d(1,1,0)
Vous pouvez le comprendre lorsque (gauche et droite, haut et bas, taille) changent.
rotate3d(1,1,0,45deg)

Mise en œuvre

1 Les deux nuages ​​sont identiques sauf pour leur taille et leur position initiale. .

.cloud {

position : absolue;

z-index : 3;

largeur:99px;hauteur:64px; haut: 0;

droite: 0;

bas: 0;

animation : cloud 5s linéaire infini ;

}

@keyframes cloud {

de {

transformation : traduire3d(-125rpx, 0, 0);

}

à {

transformer : traduire3d(180rpx, 0, 0);

}

}

où rpx est un attribut unique de WeChat et n'est pas affecté par la taille de l'écran, similaire à unité DP sous Android. Les images clés se déplacent à une vitesse constante. À partir du CSS, vous pouvez voir que seules les directions gauche et droite sont modifiées.
2. Au départ, je voulais ajouter un panier suspendu à l'avatar pour le faire balancer comme une balançoire, mais cela n'a pas fonctionné, j'ai juste fait une animation aléatoire de flottement.

Le code est le suivant :

@images clés photo {  0% {    transform: translate3d(0, 20rpx, 0) rotation(-15deg);  }  15% {    transform: translate3d(0, 0rpx, 0) rotation(25deg);  }  36% {    transform: translate3d(0, -20rpx, 0 ) rotation (-20deg);  }  50% {    transform: translate3d(0, -10rpx, 0 ) rotation(15deg);  } 68% { transform: translate3d(0, 10rpx, 0) rotation(-25deg) }; 85% { transform: translate3d(0, 15rpx, 0) rotation (15deg) }; 100% { transform: translate3d(0, 20rpx, 0) rotation(-15deg) }}

Je ne m'attendais pas à ce que les images clés prennent en charge non seulement de à mais aussi le pourcentage, ce qui est bien. Ici, tant que vous contrôlez la relation hiérarchique, la durée de l'animation et la transparence, vous pouvez obtenir un nuage flottant.

Résumé

Je dois dire que CSS a encore beaucoup d'animations et d'effets spéciaux. Ajouter une petite animation à l'applet WeChat peut rendre la page plus belle. Bien entendu, les animations plus complexes ne peuvent être mises à jour que lorsque l’occasion se présente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!