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!