如何做这个文本动画[关闭]答案

【问题标题】：How to do this text animation [closed]如何做这个文本动画[关闭]
【发布时间】：2021-07-20 03:07:25
【问题描述】：

请访问https://replit.com/teams-for-education提供的以下链接，您将看到自动输入的移动文本动画然后清除...

喜欢这个：

如何做这个文字动画...
任何语言都可以工作... React/Angular/HTML+CSS 任何东西

请提供任何 github 链接或源代码或其他任何内容。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
这个其实我也不知道怎么搜。
这就是为什么我问如果任何语言提供任何帮助，我只会了解如何实现它的算法/工作流程，然后将其重写为我的首选语言。
你可能会有一些运气here

标签： html css reactjs angular web

【解决方案1】：

这是我的淘汰赛：

let i = 0,
  i2 = 0,
  custom = document.querySelector('#custom')

setInterval(write, 100)

function write() {
  text('I am Stephen!')
}

function text(str) {
  if (i < str.length) {
    custom.textContent += str[i++]
  } else if (i < str.length * 2) {
    i++
  } else if (i2 < str.length) {
    custom.textContent = str.substring(0, str.length - i2 - 1)
    i2++
  } else if (i >= str.length * 2 - 1) {
    i = 0
    i2 = 0
  }
}

div {
  display: grid;
  place-items: center;
  height: 90vh;
}

:is(#a, #b) {
  position: relative;
  display: inline-block;
  padding: 4px 1px;
  top: 0;
}

#a {
  border-right: 3px solid #fa4;
  margin-right: .5ch;
}

:is(#a, #b)::after {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 4px;
  border-radius: 3px;
}

#a::after {
  content: 'start';
  background: #fA4;
  transform: translate(3px, calc(-1em - 3px));
}

#b::after {
  content: 'end';
  background: #4af;
  transform: translate( calc(4ch - .5px), calc(-1em - 3px));
}

#b {
  border-right: 3px solid #4af;
}

<div><span id=b><span id=a>Hello, </span><span id=custom></span></span>
</div>

它不是那么干净，但我想我得到了你需要的概念。

【讨论】：

印象深刻！