javascript - Comment implémenter la fonction similaire de Mobile QQ?

Question

Comment réaliser l'animation de chiffres volant après des likes ?

Answer 1

Au départ, je voulais publier le code, mais c'est un peu long et gênant

Ma cuisine consiste à donner au nombre qui apparaît et qui grandit un p

Ensuite, ajoutez un style d'animation à ce p

C'est un peu compliqué d'extraire le fichier js. Laissez-moi vous montrer mon css
`
/Like/
@-webkit-keyframes niceIn {

0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -webkit-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

}
@keyframes niceIn {

0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

}

@-o-keyframes niceIn{

0% {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -o-transform: scale(1.5);
    transform: scale(1.5)
}
70% {
    -o-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -o-transform: scale(1);
    transform: scale(1)
}

}

@-moz-keyframes niceIn{

0% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1)
}
50% {
    opacity: 1;
    -moz-transform: scale(1.5);
    transform:scale(1.5)
}
70% {
    -o-transform: scale(.8);
    transform: scale(.8)
}
100% {
    opacity: 1;
    -moz-transform: scale(1);
    transform: scale(1)
}

}
.niceIn {

-webkit-animation:niceIn 0.8s .2s ease;
-moz-animation:niceIn 0.8s .2s ease;
-o-animation:niceIn 0.8s .2s ease;
animation:niceIn 0.8s .2s ease;

}
`

Answer 2

Écrivez le style d'animation, cliquez pour changer la classe de ce style une fois terminé

Answer 3

Cliquez pour déclencher l'animation L'animation peut être réalisée à l'aide de l'animation CSS3

.