JS动画文字

我需要帮助！我想制作标题动画，当您打开页面时，文本应该从“无处”出现。有人可以给我代码吗？我在谷歌上找到的任何东西，都只是点击并出现，没有什么像，你在网站上输入，文字从无处出现，比如淡出但没有点击，只需在网站上输入。

<h1 class="titlu"> Creative Ideas </h1>

对于简单的淡入，您可以只使用带有过渡的 CSS 类，并让 javascript 在页面加载时将该类添加到您的 h1。默认情况下，不透明度设置为 0（使 h1 不可见）。还设置了过渡，使其在 1 秒内逐渐变化。在页面加载时，它将不透明度设置为 1，这会导致淡入淡出效果。

function fadeInTitle() {
  const h1Ele = document.querySelector(".titlu");
  h1Ele.classList.add("fadeIn");
}

.titlu {
  opacity: 0;
  transition: opacity 1s ease;
}

.fadeIn {
  opacity: 1;
}

<body onload="fadeInTitle();">
  <h1 class="titlu">Creative Ideas</h1>
</body>

将来当您处理更复杂的动画时，GSAP 是一个很棒的库。有许多教程可以帮助您入门。

相关问答