1

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

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

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

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

4

4 回答 4

6

可以使用 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;
    }
}
于 2013-09-11T18:18:16.553 回答
1

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

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

要启动颜色效果，需要添加classNameblack

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

Fiddle

于 2013-09-11T18:10:30.847 回答
0

在现代浏览器上，您可以使用 CSS3 过渡，如 @RienNeVaPlus 所示

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

于 2013-09-11T18:12:15.710 回答
0

（无法在评论中格式化代码，因此发布回复）我尝试将 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>
于 2013-09-11T21:55:33.450 回答