Bolehkah Peralihan CSS Mencipta Kesan Fade-In untuk Teks pada Pemuatan Halaman?

Menggunakan CSS untuk Kesan Fade-In pada Muatan Halaman

Bolehkah peralihan CSS digunakan dengan berkesan untuk menjadikan perenggan teks pudar sebagai halaman dimuatkan?

Sudah tentu. Peralihan CSS menawarkan penyelesaian mudah untuk kesan visual ini. Pertimbangkan langkah berikut:

Langkah 1: Tentukan CSS

Buat peraturan CSS yang menentukan keterlihatan awal perenggan teks:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    transition: opacity 2s ease-in;  
}

• kelegapan: 0 menjadikan perenggan pada mulanya tidak kelihatan dengan menetapkan kelegapannya kepada 0.
• margin atas: 25px dan saiz fon: 21px laraskan penggayaannya.
• text-align: tengah memusatkan teks.
• peralihan: kelegapan 2s mudah- dalam; menetapkan tempoh dan kesan pelonggaran untuk peralihan.

Langkah 2: Togol Kelegapan

Untuk mencetuskan peralihan, anda perlu menukar kelegapan bagi perenggan sebaik sahaja halaman dimuatkan. Ini boleh dicapai menggunakan:

Kaedah 1: Animasi CSS (seruan sendiri)

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test p { ... } /* Apply the fadein animation */

Kaedah 2: jQuery atau JavaScript Biasa

• jQuery: $("#test p").addClass("load");
• JavaScript biasa: document.getElementById("test").children[0].className = " load";

Langkah 3: Laraskan CSS untuk kelas "muat"

Dengan kelas ditambah, tentukan gaya untuk perenggan apabila berada dalam keadaan "muat":

#test p.load {
    opacity: 1;
}

Sebagai alternatif, anda boleh menggunakan JavaScript untuk menukar kelegapan terus.

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