如何在自身上有一个 HTML 文本元素循环？

Posted 2023-03-05

【中文标题】如何在自身上有一个 HTML 文本元素循环？

【英文标题】：How to have an HTML text element loop on itself?

【发布时间】：2021-11-02 02:39:30

【问题描述】：

我正在研究一些前端的东西并学习反应。目前，我正在构建一个后台组件，该组件将任意字符串作为道具并构建一组填充该字符串的跨度。 Here's a brief JSFiddle mockup to better illustrate what I'm doing.

为了美学，我的意图是让这些文本的行在背景中无限期地水平滚动。到目前为止，我已经取得了很大的进步，但目前我遇到了一个与文本动画相关的问题。

  @keyframes animatePos 
    0% 
      transform: translateX(0);
    
    100% 
      transform: translateX(+100%);
    
  

这样，文本一直移动到视图的另一侧，太棒了！除了动画在完全完成之前不会重复，所以最终会有很多空白，我希望将其删除。我已经阅读了this post，但解决方案涉及将文本转换为 svg，由于我希望文本是动态的，我认为这不是一个好的方向。

我有点不知道从这里去哪里。我的第一个想法是在跨度移动一定量后将其他条目推送到数组中，但这绝对不是一个非常可扩展的解决方案。同样，我是新手，所以我不确定它在这种情况下能做什么。任何关于采取什么方向的建议将不胜感激。

【问题讨论】：

你想制作一个选框吗？ developer.mozilla.org/en-US/docs/Web/html/Element/marquee

这可能对***.com/questions/45847392/…有帮助

@evolutionxbox 本质上，是的。然而，选框的功能就像我上面提到的那样，它在重复之前等待文本到达页面末尾。我希望文本一到达页面末尾就开始重复，形成一个没有空格的完整循环。

您可能需要复制文本才能像这样换行。

【参考方案1】：

我玩过你的东西，很酷。

我对 Marquee 了解不多，但似乎与您的文字有关。

如果我将文本更改为text: "abc"。它似乎以您想要的方式工作。