Avant-propos

Le rendu ci-dessus (animation GIF)

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) }}