文本颜色，随时间褪色效果

Text color with fading over time effect

本文关键字：褪色 时间 颜色 文本      更新时间：2023-09-26

有什么方法可以通过javascript或css对html文本进行淡入淡出/衰减颜色效果吗？

现在我从数据库中读取并将文本附加到div，文本最初是蓝色的，它会在一定时间（如 5 秒）内衰减为黑色。

现在我只是将文本附加到div

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

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

下面是一个示例。

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

大多数浏览器已经支持CSS过渡：

#txtBox1 {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
}
#txtBox1.black {
    color:black;
}

要开始颜色效果，您需要添加类名black 

$('#txtBox1').addClass('black');

小提琴

在现代浏览器上，您可以使用 CSS3 转换，如 @RienNeVaPlus

在较旧的浏览器上，您可以将 jQuery UI 添加到项目中，以添加对 CSS 颜色的动画支持。 可以获得一个自定义的jQuery UI构建，该构建仅包含基本功能，而不包含所有其他小部件。

（无法在注释中格式化代码，因此发布回复）我试图将 RienNeVaPlus 的代码修改为以下内容：

$.ajax({...
    success: function(data) {
           for (var i = 0; i < data.message.length; i++) { 
                   txt = "<p id='line"+count+i+"' class='fadingColor'># "+ data.message[i]+ "</p>"
                   $('#txtBox1').append(txt);
                   $('#line'+count+i).addClass('black');
            }
             count = data.count;}

.css

.fadingColor {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
 }
.fadingColor.black {
    color:black;
}

但它总是显示黑色，来自 Chrome 检查元素：

<p id="line050" class="fadingColor black"># Zone 3 Opened</p>
相关文章：