css 如何实现这种颜色的局部动态切换

[xxxpara]

http://www.everants.com/wp-content/uploads/2015/03/QQ截图20150321200946.png
当蓝色进度条移动到文字处时蓝色背景的部分文字会变成白色

[abelyao]

最简单的就是做个 a:hover 咯，然后把背景色对调一下。

[xxxpara]

@abelyao 这个不是通过鼠标触发的，而是进度条自己增加

[abelyao]

@xxxpara 你就给了一张 png 也没给页面不知道具体是怎样的效果。
不明白所谓的“进度条”是指什么，如果是一个定时效果的话，CSS 3 中已经有了关于动画的样式，也可以指定多少时间之后发生什么样式改变。

[xxxpara]

@abelyao 这个我知道，但是这里的是这样的：随着进度条覆盖掉文字文字的颜色跟着改变
我只能想到弄两个div一个在上一个在下去实现

[abelyao]

@xxxpara 两个元素完全可以实现，把动画时间控制好就行了。

[yangff]

一层白色底
一层蓝色进度条
一层蓝色文字
一层白色文字
+一层遮罩进度条给文字做mask，动画和蓝色进度条保持一致

这样应该可以吧。。

[yangff]

唔。。白色文字和蓝色进度条可以放一起，然后加一个mask或者关于width的动画应该也行。。？

[MaiCong]

文字根据进度变色我还玩不来，只能这样：

http://codepen.io/anon/pen/azPawX

[czheo]

http://codepen.io/anon/pen/LEMXQr

[xxxpara]

@czheo 厉害，伪元素还能这么用

[wsph123]

太啰嗦
http://itorr.sinaapp.com/javascript/textplan_20150322.htm