文字颜色随着时间的推移而褪色 [英] Text color with fading over time effect

问题描述

有什么办法可以通过javascript或css对html文本执行褪色/衰减颜色效果吗?

Is there any way i can do fading/decay color effect on html text by javascript or css?

现在我从数据库中读取并将文本附加到div，文本最初将是蓝色，并且在一定时间(例如5秒)内将逐渐变为黑色.

right now i read from database and append the text to a div, the text initially would be blue color and it will decay to black color over certain amount of time (like 5 secs).

现在我只用

$('#txtBox1').append(#" + data.message [i] +</br>");

推荐答案

可以轻松使用CSS动画完成.

Can be easily done with CSS animations.

这是一个例子.

jsFiddle演示

.fading {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fading;
    animation-duration: 1s;
    animation-name: fading;
}
@-webkit-keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}
@keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}

这篇关于文字颜色随着时间的推移而褪色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！