如何在X秒后更改文字颜色？ [英] How to change text color after X amount of seconds?

问题描述

这是我的代码：

 < font color = green> 
 14:00 
< / font>< br> 
< font color = green> 
 14:30 
< / font>< br> 
< font color = green> 
 15:00 
< / font>< br> 
 ........ 
  

如何更改颜色（红色）每一个单一的文本经过一段时间过去了？

我试过这段代码，但显然它不起作用（ onLoad 仅用于body / img标签）：

 < font color = green onLoad =setTimeout（'this。 style.color =红，XXX-秒）;> 
 14:00 
< / font>< br> 
  

有什么建议？

采用的解决方案（感谢minitech）：

 < style> 
 @keyframes从{color：green} 
改为{color：red} 
} 
  
 
< span style ='animation：change（seconds-of-seconds）s step-end both;'> 
 14:30 
< / span> 
< span style ='animation：change（seconds-of-seconds）s step-end both;'> 
 15:00 
< / span> 
 ............. 
  

解决方案<

c> font {
动画：改变3s步骤结束;
}

@keyframes将{b $ b从{color：green}
更改为{color：red}
}

现场演示： http://jsfiddle.net/simevidas/7ZrtQ/

在上面的代码中，延迟由 3s 代表3秒。

顺便说一句，如果你不想在页面加载时执行定时器，而是想要通过一些后续事件（例如用户单击）触发它，您可以在CSS类中定义动画，然后使用JavaScript将该类添加到元素中以触发该效果。

现场演示： http://jsfiddle.net / simevidas / 7ZrtQ / 3 /

this is my code:

<font color=green>
     14:00
</font><br>
<font color=green>
     14:30
</font><br>
<font color=green>
     15:00
</font><br>
........

How can I change color (in red) of every single text after some time has passed?

I have tried this code but obviously it doesn't function (onLoad is only for the body/img tags):

<font color=green onLoad="setTimeout('this.style.color=red',xxx-seconds);">
     14:00
</font><br>

Any suggestions?

Solution adopted (thanks to minitech):

<style>
    @keyframes change {
        from { color: green }
        to   { color: red }
    }
</style>

<span style='animation: change (number-of-seconds)s step-end both;'>
    14:30
</span>
<span style='animation: change (number-of-seconds)s step-end both;'>
    15:00
</span>
.............

解决方案

You could use CSS animations for this:

font {
    animation: change 3s step-end both;
}

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

Live demo: http://jsfiddle.net/simevidas/7ZrtQ/

In the above code, the delay is defined by 3s which represents 3 seconds.

Btw, if you don't want to have the timer execute on page load, but instead want to have it triggered by some subsequent event (e.g. a user click), you can define the animation in a CSS class, and then just add that class to the element later with JavaScript to trigger the effect.

Live demo: http://jsfiddle.net/simevidas/7ZrtQ/3/

这篇关于如何在X秒后更改文字颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！