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

Animasikan Perenggan Teks Pada Pemuatan Halaman Menggunakan CSS

Soalan:

Bolehkah peralihan CSS dimanfaatkan untuk mencipta kesan pudar untuk perenggan teks sebagai halaman dimuatkan?

Penjelasan:

Peralihan CSS membolehkan elemen beralih dengan lancar daripada satu gaya ke gaya lain dalam tempoh tertentu. Sifat ini boleh digunakan pada sifat kelegapan, mendayakan kesan fade-in.

Kaedah 1: Animasi CSS

Untuk peralihan yang menggunakan sendiri, Animasi CSS adalah lebih sesuai. Mereka menyediakan sintaks animasi khusus yang direka khusus untuk tujuan ini.

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

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

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

Sokongan Penyemak Imbas:

• Semua penyemak imbas moden
• Internet Explorer 10

Kaedah 2: Peralihan CSS dengan Kelas Togol

Sebagai alternatif, peralihan CSS boleh dicetuskan menggunakan togol kelas:

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

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

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

Sokongan Penyemak Imbas:

• Semua pelayar moden
• Internet Explorer 10

Kaedah 3: Animasi Menggunakan jQuery

Untuk keserasian merentas pelayar, jQuery boleh digunakan untuk menghidupkan perubahan kelegapan:

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

. Mel Kaedah:

[DotmailApp](http://dotmailapp.com/) menggunakan kaedah yang sama dengan kelewatan sedikit untuk meningkatkan kesan. Teknik ini, bagaimanapun, memerlukan jQuery 2.x dengan sokongan penyemak imbas yang lebih luas.

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