如何使文本显示速度变慢

How to make text display slower?

本文关键字：速度 显示 何使 文本      更新时间：2023-09-26

如何使网页上的任何文本（例如h1标记）display变慢，就像CSS3标记-webkit-transition-duration/transition-duration一样？

我没有任何代码可以提供，因为我只是好奇，而且，我在互联网上没有发现任何有用的东西（不能保证我在每一页都搜索过）或"相关"问题。

它需要JavaScript吗？（如果我不够清楚，我可以举一个例子）。

这完全取决于你想做什么。如果你只想一次fade-in文本（或其他动画），css3可能足以处理这个问题。

如果您试图逐个字母地显示文本（例如，在RPG中可以找到），那么您需要代码来迭代字符串，并一次只写一个字母。

以下是javascript中的一个例子，直接取自对类似问题的回答：

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

从本质上讲，代码查看传递到其中的数据的每个索引（例如，t，然后是h，然后是e），并一次一个字母地将其写入目标。

有关其他详细信息，请参阅链接的答案。

这里有一个关于CSS3动画的好链接。此外，如果你不介意使用插件的话，jQuery为许多动画提供了一些很棒的功能，这些功能超出了CSS本身的功能。

顺便说一句，当你尝试执行这样的动画时，你应该记住浏览器的兼容性。较旧的浏览器可能会对这类东西有不稳定或不支持，所以你应该有一个后备方案。

编辑：

很抱歉添加另一个链接，但这里有一个很好的实现，可以一次显示一个单词。这个代码直接取自链接的答案，并添加了我的解释：

var textToDisplay = "Even more awesome text inside here, but displayed one word at a time",
  $output = $("p");
$("button").click(function() {
  var displayInt;
  textToDisplay = textToDisplay.split(' '); //split the text variable into an array
  $output.empty(); //clear out the $output variable
  displayInt = setInterval(function() {
    var word = textToDisplay.shift(); //removes the first word ("Even") and sets the word variable to that value
    if (word == null) { return clearInterval(displayInt); } //if we're out of words to append
    $output.append(word + ' '); //else, add the word and then a space (.split(' ') will not carry over the spaces)
  }, 300); //setInterval is delayed 300ms, so a word will be added every 300ms
});

注意这个方法和我之前添加的方法都使用jQuery（$符号是jQuery前缀）。如果你点击第二个答案的链接，有一个片段可以让你试用这个代码。

使用CSS3动画可以轻松做到这一点：

h1{
  animation:fadeIn 5s;
  }
@keyframes fadeIn{
  0%{opacity:0;}  
  80%{opacity:0;}
  100%{opacity:1;}
  }
<h1>I fade In</h1>

此片段将等待4秒，然后在h1中淡出。

代码说明：

h1{
  /*Since we want the h1 to fade in, and stay there, we cannot use animation-delay.*/
  animation:fadeIn 5s;
  /*Instead, we can add the delay by setting the animation to longer*/
  }
@keyframes fadeIn{/*Then, don't actually animate anything for, in this case, 4 seconds*/
  0%{opacity:0;}  
  80%{opacity:0;}
  100%{opacity:1;}
  }

如果你想一次淡出一个字母，你必须使用JavaScript。

使用javascript与CSS3动画相结合，您可以实现JS Fiddle，其中您用span包裹每个字母，并根据字母的位置向其添加延迟值的CSS动画，因此您可以逐字母淡入文本：

var $test = document.getElementById('test').innerHTML, $html = '', $i;
for ($i = 0; $i < $test.length; $i++) {
  $html += '<span style="animation: foo ' + $i + 's">' + ($test[$i]) + '</span>';
}
document.getElementById('test').innerHTML = $html;
@keyframes foo {
  0%, 10% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}
<h1 id="test">I am Sample Text</h1>

因此，您可以设置不同属性的动画，而不仅仅是淡入，例如逐个字母平滑地更改颜色JS Fiddle 2

var $test = document.getElementById('test').innerHTML, $html = '', $i;
for($i=0; $i<$test.length; $i++){
	$html += '<span style="animation: foo ' +$i+'s">' + ($test[$i]) + '</span>';
}
document.getElementById('test').innerHTML = $html;
document.getElementById('test').style.color = 'green';
@keyframes foo{
  0%,10%{color:orange;}
  15%,100%{color:green;}
}
<h1 id="test">I am Sample Text</h1>

相关文章：