Bagaimana untuk Mengisi Warna Latar Belakang Kiri ke Kanan dengan Kesan Hover CSS?

Mengisi Warna Latar Belakang Kiri ke Kanan Menggunakan CSS

Dalam CSS, anda boleh mencipta kesan tuding yang menawan dengan menggunakan kecerunan linear dan menganimasikan kedudukan latar belakang. Pendekatan ini membolehkan anda mengisi latar belakang elemen dari kiri ke kanan dengan warna baharu semasa tuding.

Kecerunan Linear dan Saiz Latar Belakang

Kuncinya ialah menggunakan latar belakang kecerunan linear yang terdiri daripada dua warna dan tetapkan saiz latar belakang menjadi dua kali lebar elemen. Ini membolehkan anda membuat peralihan yang lancar antara dua warna.

Kedudukan dan Animasi Latar Belakang

Pada mulanya, letakkan latar belakang ke kanan untuk bermula dengan warna paling kiri. Apabila tuding, tukar kedudukan latar belakang ke kiri untuk mendedahkan warna paling kanan. Untuk membuat peralihan secara beransur-ansur, tambahkan peralihan:all 2s ease; harta.

Contoh Kod

<code class="css">div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}</code>

Menyesuaikan Peralihan

Untuk mengawal titik permulaan dan penamat peralihan , laraskan peratusan dalam kecerunan linear. Sebagai contoh, berikut ialah konfigurasi yang beralih daripada 34% kepada 65% lebar elemen:

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

Dengan melaksanakan teknik ini, anda boleh dengan mudah mencipta kesan tuding yang elegan dan menarik perhatian yang meningkatkan pengalaman pengguna aplikasi web anda dan meningkatkan daya tarikan visual keseluruhan reka bentuk anda.

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