Question

当我的网页加载时，使用css，我希望文本“widget world”出现在顶部，好像有人在手动编写它一样;一次出现一个字母。

我将使用草书字体。每个字母出现之间会有几毫秒的延迟。

我想把每个字母分成一个单独的div然后逐个淡出它们。

Answer 1

这是您正在寻找的内容的片段。

p{
  color: Pink; 
  font-family: "Courier";
  font-size: 20px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}

@keyframes type{ 
  from { width: 0; } 
}

<p>Hi folks, this is typing animation using CSS</p>

Answer 2

以下是您将要做的一个简单示例：

var text = 'Widget World';

var textElements = text.split("").map(function(c) {
  return $('<span id="' + c + '">' + c + '</span>');
});

var el = $('#letters');
var delay = 50; // Tune this for different letter delays.
textElements.forEach(function(e, i) {
  el.append(e);
  e.hide();
  setTimeout(function() {
    e.fadeIn(300)
  }, 100 + i * delay)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="letters"></div>

Answer 3

也许这种方式适合你：内联块的固定宽度和减少或增加宽度的动画

div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: example 2s linear 0s infinite alternate;
}

@keyframes example {
  from {
    width: 0;
  }
  to {
    width: 150px;
  }
}

<div>some text</div>

如何一次淡入/显示一个字母？

3 个答案: