Wie animiere ich die Textanzeige Buchstabe für Buchstabe mit CSS und JavaScript?

Animierte Textanzeige mit CSS und JavaScript

Die Anzeige von Text Buchstabe für Buchstabe fügt Webseiten ein dynamisches und ansprechendes Element hinzu. Während es Brute-Force-Ansätze gibt, bieten CSS3 und jQuery elegantere Lösungen.

CSS3-Animation

CSS3 stellt die text-shadow-Eigenschaft bereit, die mehrere Schatten des Textes erzeugt . Durch die Animation der Schatten können Sie die Illusion erzeugen, dass der Text Buchstabe für Buchstabe erscheint.

<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 bietet einen direkteren Ansatz durch die Aufteilung der Schatten Text in einzelne Zeichen zerlegen und in bestimmten Abständen an das Zielelement anhängen.

<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>

Diese Lösung unterstützt auch die Verarbeitung innerer HTML-Inhalte durch rekursives Anwenden der Animation auf jedes untergeordnete Element.

Das obige ist der detaillierte Inhalt vonWie animiere ich die Textanzeige Buchstabe für Buchstabe mit CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!