Bagaimana untuk mencapai peralihan warna yang lancar bagi animasi kecerunan tirus?
P粉2855875902023-09-01 16:37:22
0
1
412
Saya sedang menghidupkan kecerunan tirus, tetapi perubahan warna tidak cukup licin Saya telah melihat pelbagai artikel tetapi tidak dapat mengeluarkannya dengan betul Anda boleh mencari kod saya di sini:
Imej latar belakang tidak bernyawa dengan lancar seperti yang anda mahukan.
Walau bagaimanapun, anda boleh menganimasikan kelegapan dengan lancar, jadi satu cara untuk mendapatkan kesannya ialah dengan meletakkan dua imej latar belakang di atas satu sama lain dan menukar kelegapannya supaya ia bertukar secara beransur-ansur dari satu ke yang lain.
Dalam kes anda, anda boleh meletakkan imej latar belakang pada sebelum dan selepas elemen pseudo dan bukannya pada elemen itu sendiri.
Mereka mempunyai animasi yang sama, tetapi satu bermula di tengah (apabila kelegapan ialah 1).
Sukar untuk merealisasikan kesan pengadunan apabila jumlah tempoh hanya 1 saat, jadi coretan kod ini meningkatkan tempoh supaya anda dapat melihat kesannya.
Sudah tentu, anda boleh menukar masa mengikut keperluan.
Perubahan juga adalah linear supaya tindanan sentiasa memberikan imej "keseluruhan" dan bukannya imej separa lutsinar.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Imej latar belakang tidak bernyawa dengan lancar seperti yang anda mahukan.
Walau bagaimanapun, anda boleh menganimasikan kelegapan dengan lancar, jadi satu cara untuk mendapatkan kesannya ialah dengan meletakkan dua imej latar belakang di atas satu sama lain dan menukar kelegapannya supaya ia bertukar secara beransur-ansur dari satu ke yang lain.
Dalam kes anda, anda boleh meletakkan imej latar belakang pada sebelum dan selepas elemen pseudo dan bukannya pada elemen itu sendiri.
Mereka mempunyai animasi yang sama, tetapi satu bermula di tengah (apabila kelegapan ialah 1).
Sukar untuk merealisasikan kesan pengadunan apabila jumlah tempoh hanya 1 saat, jadi coretan kod ini meningkatkan tempoh supaya anda dapat melihat kesannya.
Sudah tentu, anda boleh menukar masa mengikut keperluan.
Perubahan juga adalah linear supaya tindanan sentiasa memberikan imej "keseluruhan" dan bukannya imej separa lutsinar.