Bagaimana untuk Menghidupkan Surat Paparan Teks dengan Surat dengan CSS dan JavaScript?

Paparan Teks Beranimasi dengan CSS dan JavaScript

Menunjukkan huruf demi huruf teks menambah elemen dinamik dan menarik pada halaman web. Walaupun pendekatan brute-force wujud, CSS3 dan jQuery menawarkan penyelesaian yang lebih elegan.

Animasi CSS3

CSS3 menyediakan sifat bayang teks, yang mencipta berbilang bayang teks . Dengan menghidupkan bayang-bayang, anda boleh mencipta ilusi teks yang muncul huruf demi huruf.

<code class="css">#msg {
  text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  animation: show-text 3s steps(5);
  animation-fill-mode: forwards;
}

@keyframes show-text {
  from {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  }
  to {
    text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  }
}</code>

JQuery Animation

jQuery menawarkan pendekatan yang lebih langsung dengan memisahkan teks ke dalam aksara individu dan menambahkannya pada elemen sasaran pada selang waktu tertentu.

<code class="html"><div id="msg"></div></code>

<code class="jquery">var showText = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
};

$(function () {
  showText("#msg", "Hello, World!", 0, 500);
});</code>

Penyelesaian ini juga menyokong pengendalian kandungan HTML dalaman dengan menggunakan animasi secara rekursif pada setiap elemen kanak-kanak.

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Surat Paparan Teks dengan Surat dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!