Bagaimana untuk mencapai animasi isian warna dari kiri ke kanan pada elemen li menggunakan CSS?

Isi Warna Latar Belakang Kiri ke Kanan dengan CSS

Anda berusaha untuk menjadikan latar belakang elemen li diisi dari kiri ke kanan dengan yang berbeza warna pada tuding. Untuk mencapai matlamat ini, anda akan menggunakan kecerunan linear dan menghidupkan kedudukan latar belakang.

Pelaksanaan Kod:

1. Tetapkan kecerunan linear yang merangkumi 50% merah dan 50% biru.
2. Nyatakan kecerunan bermula pada tepi kanan.
3. Tentukan latar belakang menjadi dua kali lebar elemen (cth., "saiz latar belakang: 200% 100%;").

<code class="css">background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;</code>

4. Pada tuding, ubah suai kedudukan latar belakang ke tepi kiri dan gunakan peralihan (cth., "transition:all 2s ease;").

<code class="css">background-position: left;</code>

Awalan Vendor:

Awalan vendor mungkin diperlukan jika anda ingin memastikan keserasian merentas penyemak imbas. Rujuk ulasan dalam soalan anda untuk panduan tentang awalan vendor tertentu.

Pilihan Tambahan:

• Untuk mencipta "peralihan warna," lanjutkan kecerunan kepada 300% lebar dan laraskan titik mula dan tamat peralihan dengan sewajarnya.
• Lihat pautan JS Fiddle yang disediakan untuk demonstrasi langsung.

Atas ialah kandungan terperinci Bagaimana untuk mencapai animasi isian warna dari kiri ke kanan pada elemen li menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!