页面加载时如何让文本滚动和淡入？

如何解决页面加载时如何让文本滚动和淡入？

我正在寻找文本如何加载到页面上，并在页面上从左到右一次显示一个字母。但是，当文本加载时，我希望这样一个字母的大小会稍微增加和减少一次。所以，这封信在加载时看起来像墨西哥波浪。

我已经管理了下面的代码，这有点像打字机的感觉并且截断了部分信件。不知道有没有人知道解决办法？

非常感谢，

.line-1{ 
width: 100%; 
margin: 0 auto; 
text-align: center; 
white-space: Nowrap; 
overflow: hidden; 
} 

.anim-typewriter{ 
text-align: center; 
animation: typewriter 2s 0.5s 1 normal both; 
} 
@keyframes typewriter{ 
from{width: 0;} 
to{width: 100%;} 
}

解决方法

如果您只想使用 html 和 css (https://css-tricks.com/snippets/css/typewriter-effect/)，我找到了一些示例

如果您想一个一个地为字母设置动画，则必须使用 javascript。

您可以尝试创建一个定时函数，每 0.5 秒创建一个仅包含一个字母的新元素，添加一个类，通过使字母变大和变小来为字母设置动画，然后将字母元素与文本合并。

或者您可以为单个字母制作 css 动画，然后每 0.5 秒使用该类创建一个新元素。

示例（我使用的是虚拟标签）：

第一个选项看起来像：<text> first part of the te </text> <letter class="mexican"> x </letter>

第二个选项看起来像：<letter class="mexican"> f </letter><letter class="mexican"> i </letter><letter class="mexican"> r </letter><letter class="mexican"> s </letter>