Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengisi Warna Latar Belakang Elemen LI dari Kiri ke Kanan pada Hover dengan CSS3?

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

Susan Sarandon
Susan Sarandonasal
2024-10-30 12:58:26982semak imbas

How to Fill an LI Element's Background Color from Left to Right on Hover with 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn