Bagaimana untuk Mencipta Peralihan Warna Latar Belakang Gelongsor dari Bawah dengan CSS?

Cara Peralihan Warna Latar Belakang dari Bawah

Apabila cuba menukar warna latar belakang elemen pada tuding menggunakan peralihan CSS, satu mungkin menghadapi isu latar belakang yang semakin pudar dan bukannya meluncur ke atas. Walaupun adalah mungkin untuk mencapai kesan pudar menggunakan kod yang disediakan, pendekatan berbeza diperlukan untuk mencapai animasi gelongsor yang diingini.

Satu penyelesaian melibatkan penggunaan imej latar belakang atau kecerunan, dan melaraskan kedudukan latar belakang secara progresif. Kaedah ini mencipta ilusi latar belakang yang meluncur ke atas dari bawah:

.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%;
}

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

Dalam senario ini, elemen diberikan imej latar belakang dengan kecerunan linear, mencipta peralihan menegak yang diingini. Apabila elemen dituding ke atas, kedudukan latar belakang dianjak ke atas, menghasilkan kesan latar belakang meluncur ke atas dari bawah.

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