javascript - Bagaimana untuk melaksanakan fungsi seperti qq mudah alih?

Question

Bagaimana untuk mencapai animasi nombor terbang selepas suka?

Answer 1

Saya pada asalnya ingin menghantar kod, tetapi ia agak panjang dan menyusahkan

Masakan saya adalah untuk memberikan nombor yang muncul dan menjadi lebih besar kepada p

Kemudian tambah gaya animasi pada p ini

Agak menyusahkan untuk mengekstrak fail js biar saya tunjukkan css saya
`
/Suka/
@-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

Tulis gaya animasi, klik untuk menukar kelas gaya ini apabila selesai

Answer 3

Klik untuk mencetuskan animasi Animasi boleh direalisasikan menggunakan animasi CSS3

.