Bolehkah Peralihan CSS Mencipta Kesan Fade-In pada Muatan Halaman?

Mencipta Kesan Fade-In pada Muatan Halaman Menggunakan Peralihan CSS

Bolehkah peralihan CSS digunakan untuk kesan pudar pada teks apabila halaman dimuatkan?

Untuk mencapai kesan pudar-dalam ini, masukkan mengikuti peraturan CSS:

uji p {

margin-top: 25px;
font-size: 21px;
text-align : tengah;
kelegapan: 0;
peralihan: kelegapan 2s mudah masuk;
}

Sekarang, untuk mencetuskan peralihan pada beban, anda boleh menggunakan salah satu kaedah berikut:

Kaedah 1: Animasi CSS (Tidak Secara meluas Disokong)

ujian p {

animasi: fadein 2s;
}

@keyframes pudar {
daripada { kelegapan: 0; }
kepada { kelegapan: 1; }
}

Kaedah 2: jQuery atau JavaScript

Laksanakan skrip jQuery berikut pada pemuatan dokumen:

$("#ujian p").addClass("load");

Dengan CSS yang sepadan:

ujian p {

peralihan: kelegapan 2s kemudahan masuk;
kelegapan: 0;
}

uji p.load {

kelegapan: 1;
}

Kaedah 3 : Menggunakan Animasi Tertunda jQuery

cetuskan animasi dengan kelewatan dan tetapkan tempoh:

$("#test p").delay(1000).animate({ kelegapan: 1 }, 700);

Perhatikan bahawa kaedah yang berbeza mungkin menawarkan pelbagai tahap keserasian merentas penyemak imbas, seperti yang dibincangkan dalam yang disediakan jawapan.

Atas ialah kandungan terperinci Bolehkah Peralihan CSS Mencipta Kesan Fade-In pada Muatan Halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!