Question

如何在我的网页上制作任何文字（例如h1代码）display，这与CSS3代码-webkit-transition-duration / transition-duration几乎相同给出效果？

我没有任何代码可供提供，因为我只是好奇，而且，我在互联网上找不到任何有用的东西（不能承诺我会这样做）在每一页中搜索）或＆＃34;相关＆＃34;题。

是否需要JavaScript？（如果我不够清楚，我可以提供一个例子）。

Answer 1

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

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

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

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 Animations上的一个很好的链接。此外，如果您不介意使用插件，jQuery对于许多动画都有一些很好的功能，这些动画超出了CSS可以独立完成的功能。

另外，当您尝试执行此类动画时，应牢记浏览器兼容性。较旧的浏览器可能会对此类事件提供支持或 no 支持，因此您应该进行回退。

编辑：

很抱歉添加其他链接，但here是一次显示一个字的好方法。此代码直接取自链接的答案，我的解释补充说明：

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前缀）。如果单击第二个答案的链接，则会有一个片段，可让您试用此代码。

Answer 2

您可以使用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。

Answer 3

使用javascript与CSS3动画相结合，你可以实现这个JS Fiddle，你可以用span包装每个字母，并根据字母的位置添加带有延迟值的CSS动画你可以逐字逐句地填写淡入文本：

＆＃13;

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;

＆＃13;

@keyframes foo {
  0%, 10% {
    opacity: 0;
  }
  15%, 100% {
    opacity: 1;
  }
}

＆＃13;

<h1 id="test">I am Sample Text</h1>

＆＃13;

因此，您可以为不同的属性设置动画，不仅可以淡入淡出，例如逐字逐句地更改颜色JS Fiddle 2

＆＃13;

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

＆＃13;

@keyframes foo{
  0%,10%{color:orange;}
  15%,100%{color:green;}
}

＆＃13;

<h1 id="test">I am Sample Text</h1>

＆＃13;

如何让文字显示更慢？

3 个答案: