使用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秒的动画。

---

所以，如果你真的想对此发疯，我还有另一个想法。

您可以进行遮罩 - 只需复制您的段落并在其上放置一个完全红色和透明的副本。然后，为了增加红色，只需调整蒙版元素的不透明度。这是一个例子（注意我使用75％而不是15％来使其更明显）：http://jsfiddle.net/vek4d/1/