如何淡入/一次显示一个字母？ [英] How to fade in / reveal one letter at a time?

问题描述

当我的网页加载时，使用CSS，我希望文本小部件世界出现在顶部，就好像有人正在手动编写它一样;一次会出现一封信。

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

我想让每个字母都是一个单独的div，然后逐个淡入淡出。

解决方案

以下是您正在查找的内容的一个片段。 snippetdata-lang =jsdata-hide =false>

p {color：Pink; font-family：信使; font-size：20px; margin：10px 0 0 10px;白色空间：nowrap;溢出：隐藏;宽度：30em;动画：类型4s步骤（60，结束）; } @keyframes type {from {width：0; }}

< p>使用CSS的动画< / p>

When my web page loads, using css, I want the text "widget world" to appear across the top as if someone were writing it manually; one letter at a time would appear.

I'm going to use a cursive font. There would be a few milliseconds delay in between each letter appearing.

I thought to make each letter a separate div then fade them in one by one.

解决方案

Here's a snippet for something that you are looking for.

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>

这篇关于如何淡入/一次显示一个字母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！