Question

我想知道是否可以在<a> ... </a>标签内更改我的文字颜色，在一定时间间隔后从黑色变为红色并保持永久红色。

do {
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
  await sleep(...)
  document.getElementById("code").innerHTML +="<a>Hello World</a><br>";
} while {...}

并且在此代码运行之后，它应该将第一个“Hello World”从黑色更改为红色，然后第二个“Hello World”将打印并将该文本颜色从黑色更改为红色，依此类推......

我在这个问题上探索了不同的方法......

a {
    animation: change 1s step-end both;
}

@keyframes change {
    from { color: black }
    to   { color: red }
}

但是我发现这个方法的问题在于它经常从黑色变为红色并且返回包含标签的所有文本，并且颜色变化不会保持永久性。

Answer 1

请勿使用@keyframes。因为关键帧在循环中工作。

打印文本，然后使用HTML和CSS更改颜色

1 个答案: