CSS+JS如何實現這樣的顏色動態切換？

這是一個進度條，當藍色的進度過渡到文字部分時，文字就局部從藍色變為白色

---

兩層div，最上面的width動畫變寬。

25%

70%

---

2015-03-23 感謝@imPony 提醒！更新了一下代碼，這次實現了 把內容層徹底解耦~

_________________

前面的幾個回答有點啰嗦，來個短的。

HTML 部分只需要一個標籤，同時可以復用~

&&

CSS 部分同樣很短~

.iplan{
width:300px;
font:40px/100px arial;text-indent:100px;
background:#fbfbfc;color:#0BF;
position:relative;}
.iplan:before{content:attr(text);}
.iplan:after{content:attr(text);
position:absolute;left:0;
white-space:nowrap;overflow:hidden;
width:50%;transition:width 1s ease;
background:#0BF;color:#fbfbfc;}


完整代碼：THIS 進度條

---

在V2EX上有大神給了我另一種方案，用的是偽元素：

A Pen by Captain Anonymous

感覺這個更妙~

作者：czheo

---

雖然我看到了要求是CSS+JS，但是我決定無視要求，只看展示效果，不想功能是幹啥的。於是自作主張用純CSS嘗試寫了一個。

進度條字體反色純CSS處理方案 http://codepen.io/tkoctkoc/pen/ryMPgY 來自 @CodePen

需要修改animation的值。

靈感來自Hover.css - A collection of CSS3 powered hover effects Background Transitions

---

推薦閱讀：