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

我想知道是否有可能改变我的文本在<a> ... </a>标签内的颜色，从一个黑色到红色，并保持一定的时间间隔，并保持永久红色。打印文本，然后改变颜色使用HTML和CSS

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 } 
}

但我发现用这种方法的问题是，它不断地从黑色变为红色和背部上的所有文本包含标签，并且颜色变化不会保持永久。

来源

2017-03-15 Zhan Fang

所以你想你的''保持红色，即使重新加载？ – YounesM

嗨，感谢您的评论，不是在重新加载之后，我的文本最初是黑色的，并且在打印语句后....有一个延迟（2s）...然后文本变成红色。重新加载后，文本应该回到它的初始颜色。 –

不使用@keyframes。，因为关键帧工作在一个循环中。

来源

2017-03-15 17:40:16

嗨，谢谢你的回复，有关键帧的无循环版吗？ –

为什么不使用setTimeout（）方法来执行此操作。 –

你可以很容易地使用它来改变颜色。我认为@keyframe无法在两者之间停止。它将运行至少一个，并将再次显示最初的情况（在你的情况下黑色）。 –

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

回答

相关问题