Bagaimana untuk Mencipta Isian Warna Latar Belakang Kiri-ke-kanan dengan Kesan Hover CSS?

Mencipta Isian Warna Latar Belakang Kiri-ke-kanan dengan CSS

Dalam CSS3, kesan tuding boleh dipertingkat menggunakan peralihan untuk mencipta kesan visual dinamik . Satu senario biasa ialah mengisi latar belakang elemen dari kiri ke kanan dengan warna yang berbeza semasa tuding. Untuk mencapai ini:

Langkah 1: Gunakan Kecerunan Linear

Gunakan kecerunan linear untuk mewujudkan peralihan warna latar belakang. Tentukan dua warna dengan pembahagian yang jelas pada 50% (cth., merah sebelum 50%, biru selepas 50%).

Langkah 2: Skala dan Kedudukan Kecerunan

Skala latar belakang menjadi dua kali lebar elemen dan ketinggian 100% (mis., saiz latar belakang: 200% 100%;). Letakkan kecerunan di sebelah kanan elemen.

Langkah 3: Buat Peralihan Tuding

Pada tuding, ubah suai kedudukan latar belakang ke 'kiri'. Gandingkan ini dengan peralihan (cth., peralihan: semua 2s mudah;) untuk menghidupkan perubahan kedudukan.

Kod Contoh:

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

/* On hover */
background-position: left;</code>

Penambahan Pilihan :

Untuk mengawal warna peralihan, tingkatkan lebar latar belakang kepada 300% dan perhalusi peratusan permulaan dan tamat kecerunan (cth., 34% untuk permulaan, 65% untuk akhir).

Sokongan Penyemak Imbas:

Pertimbangkan untuk menetapkan awalan sifat peralihan untuk keserasian merentas penyemak imbas.

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