Bagaimana untuk Mencipta Peralihan Warna Latar Belakang Gelongsor Lancar dengan CSS?

Mencipta Peralihan Slaid Warna Latar Belakang Beranimasi

Soalan:

Bagaimana saya boleh menggunakan peralihan CSS untuk meluncur ke atas dengan lancar warna latar belakang elemen pada tuding, memberikan kesan menatal warna dari bahagian bawah elemen?

Jawapan:

Peralihan tradisional untuk menukar warna latar belakang hanya menyokong kesan pudar. Untuk mencipta kesan gelongsor, pendekatan alternatif diperlukan. Satu cara ialah menggunakan imej latar belakang atau kecerunan dan melaraskan kedudukannya secara beransur-ansur:

.box {
    width: 200px; height: 100px;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.box:hover {
    background-position: 0 -100%;
}

Dalam contoh ini:

• Elemen .box ditakrifkan dengan kecerunan linear yang mencipta belahan merah dan hitam mendatar.
• Dengan menetapkan kedudukan latar belakang awal kepada 0 -100%, kecerunan disembunyikan sepenuhnya.
• Pada tuding, kedudukan latar belakang dianimasikan kepada 0 0, secara beransur-ansur mendedahkan kecerunan dari bawah.

Teknik ini memberikan kesan gelongsor yang lancar untuk perubahan warna latar belakang . Perlu diingat bahawa pendekatan ini berfungsi dengan baik jika anda mahukan kecerunan latar belakang atau imej tertentu, membenarkan lebih banyak penyesuaian daripada peralihan pudar standard.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Peralihan Warna Latar Belakang Gelongsor Lancar dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!