主页 / 问题 / 1431728
Accepted
Nytnelav
Asked:2022-07-21 17:57:43 +0000 UTC2022-07-21 17:57:43 +0000 UTC

文字动画，字母外观流畅

  • 772

告诉我如何实现这样的文本动画，如本网站 - https://alethemes.com/ale-fashion/。文字“即将收藏……”的出现。有可能用纯css实现吗？或者也许有一些网站、资源有现成的类似解决方案。

анимация

1 个回答

  1. Best Answer

    你想要这个吗？

    let text = 'upcoming collection...'

for (let i in [...text]) {
  let letter = document.createElement('span')
  letter.textContent = [...text][i]
  if(letter.textContent.match(/\s/)) {
    letter.style.margin = 'auto 3px'
  }
  letter.style.animationDelay = i/10+'s'
  content.appendChild(letter)
}
    * {
  font-family: 'Segoe UI';
}

#content {
  display: flex;
}

span {
  text-transform: uppercase;
  font-weight: 500;
  animation: .3s 0s 1 text normal both running linear;
  display: block;
}

@keyframes text {
  0% {
    transform: translateY(-40px) rotate(45deg);
    opacity: .5;
  }
}
    <div id="content">
</div>

    解释

    1. 你不能只拿和写document.querySelector('div с текстом')，你需要使用textContent（或innerText，但更好textContent）来得到这样的东西：document.querySelector('Какой-то селектор').textContent

    2. [...text]- 这是扩展语法，对于“输出”数据，在这种情况下是文本，我们“输出”文本（...text），即我们分别获取每个字母（示例...'hello'-> h e l l o），然后我们得到所有这些在一个数组中，因为 一切都用方括号括起来。

    完整代码说明：

    首先，我们获取文本（字符串），然后在循环for...in中，在每次迭代中我们获取数组当前元素的索引。我们创建一个新元素<span>，将当前字母写入引用[...text]它的文本中，如果当前字符是空格，则将其添加到样式margin: auto 3px中，然后在样式中我们还指定动画的延迟，以便字母逐渐出现，首先我们将当前索引除以 10，这样延迟不会太长，最后我们只是转向content，顺便说一下，没有必要将具有的元素写入单独的变量id，您可以编写它id以立即引用它，当然也content可以将当前元素添加到其中。（通过 devtool（开发者工具）你实际上可以在 HTML 中看到结果）

    • 3

相关问题