css - 使用 CSS 逐步更改文本的颜色？

Question

鉴于我有以下 CSS:

p { color: #ccc }

和文字

<p class="grey">I'm extremely angry!</p>

我想通过添加一个类来改变文本的颜色，该类增加其颜色的红色值...以加法方式。

即我不想将文本的颜色更改为红色。我想使文本的现有颜色更红。

单独使用 CSS 是否可行？像这样的东西:

p.redder { color-increment: #c00 }

Answer 1

不是 100% CSS 解决方案 (99%)，但您可以使用 transitions 实现类似的效果.唯一的“非 CSS”部分是动态更改类。但这是最接近的。

CSS

p { color: #ccc }
p.red {
    color: #c00;
    transition: all 10s linear; // <-- this is the key
}

JS

document.getElementsByTagName('p')[0].classList.add('red');

参见此处:http://jsfiddle.net/vek4d/

基本上，一旦类发生变化，它就会设置一个 10 秒的动画。

---

所以，如果你真的想为此疯狂，我有另一个想法。

您可以进行 mask - 只需复制您的段落并在上面放一个全红色的透明副本。然后，要增加红色，只需调整 mask 元素的不透明度即可。这是一个示例(注意我使用 75% 而不是 15% 以使其更明显):http://jsfiddle.net/vek4d/1/