Bagaimana untuk Mengisi Warna Latar Belakang Elemen LI dari Kiri ke Kanan pada Hover dengan CSS3?

Mengisi Warna Latar Belakang Kiri ke Kanan dengan CSS

S: Saya cuba mencipta kesan di mana warna latar belakang elemen li diisi dari kiri ke kanan pada berlegar. Bagaimanakah saya boleh mencapai ini menggunakan CSS3?

J: Gunakan kecerunan linear sebagai latar belakang elemen dan menghidupkan kedudukannya. Berikut ialah kodnya:

<code class="css">/* Set up the background gradient (red to blue) */
background: linear-gradient(to left, red 50%, blue 50%) right;

/* Make the background twice the size of the element */
background-size: 200% 100%;

/* Position the background to the right */
background-position: right;</code>

Pada tuding, tukar kedudukan latar belakang ke kiri untuk mengisi elemen. Anda boleh menambah peralihan yang lancar dengan menggunakan peralihan: all 2s ease;.

<code class="css">/* On hover, change the background position to the left */
background-position: left;</code>

Demo:

<code class="html"><li>Hover me to fill the background</li></code>

<code class="css">li {
  display: inline-block;
  padding: 1em;
  background: linear-gradient(to left, red 50%, blue 50%) right;
  background-size: 200% 100%;
  background-position: right;
  transition: all 2s ease;
}

li:hover {
  background-position: left;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Warna Latar Belakang Elemen LI dari Kiri ke Kanan pada Hover dengan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!