Bagaimana Saya Boleh Mencipta Perubahan Warna Latar Belakang Gelongsor pada Hover dengan CSS?

Menukar Warna Latar Belakang dengan Animasi Gelongsor

Berusaha untuk mengubah rona latar belakang elemen apabila dituding melalui peralihan CSS, anda menghadapi cabaran untuk mencapai kesan tatal ke atas. Kod CSS semasa memudarkan latar belakang, tetapi anda inginkan animasi slaid yang licin.

Satu pendekatan ialah memanfaatkan imej latar belakang atau kecerunan dan melaraskan kedudukan latar belakang dengan teliti. Teknik ini membolehkan anda meluncurkan latar belakang dari bawah.

Pertimbangkan contoh berikut:

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

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

<div class="box"></div>

Dengan pendekatan ini, latar belakang pada mulanya memaparkan merah di bahagian atas dan hitam di bahagian bawah. Apabila melayang, latar belakang meluncur ke atas, mengalihkan warna merah dengan lancar ke ketinggian keseluruhan elemen.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mencipta Perubahan Warna Latar Belakang Gelongsor pada Hover dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!