Bagaimanakah Saya Boleh Mencipta Animasi Teks Pudar-In Lancar pada Muatan Halaman Menggunakan CSS, jQuery atau Kedua-duanya?

Mencipta Animasi Fade-In pada Pemuatan Halaman dengan CSS

Masalahnya: Meningkatkan estetika tapak web dengan mencipta perenggan teks yang pudar dengan lancar sebagai halaman tersebut dimuatkan.

Penyelesaian:

Menggunakan Animasi CSS

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  animation: fadein 2s;
  animation-fill-mode: forwards;
}

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

• Laksanakan penyelesaian ini dengan animasi CSS, memastikan keserasian dengan semua penyemak imbas moden .

Menggunakan jQuery

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

#test p {
  opacity: 0;
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

• Gunakan jQuery untuk menambah kelas apabila halaman dimuatkan yang mencetuskan fade-in melalui peralihan CSS.

Mencontohi Pendekatan DotMail

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

• Tiru kesan pudar yang digunakan oleh DotMail melalui gabungan kelewatan dan animasi jQuery.

Keserasian Pelayar:

• Animasi CSS: Penyemak imbas moden dan Internet Penjelajah 10
• CSS Peralihan: Penyemak imbas moden dan Internet Explorer 10
• jQuery (Diperlukan untuk Kaedah 2 dan 3): Berbeza-beza berdasarkan versi, tetapi umumnya serasi silang dengan penyemak imbas lama.

Pilih kaedah yang paling sesuai dengan keperluan sokongan penyemak imbas anda dan tahap animasi yang diingini penyesuaian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Animasi Teks Pudar-In Lancar pada Muatan Halaman Menggunakan CSS, jQuery atau Kedua-duanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!