像濾鏡同樣改變字體顏色

標題是什麼意思？可能一開始以爲怪怪的，字體顏色不就是一個css的樣式就改變了嗎？
css樣式是改變整個字體的顏色，可是怎麼改變半個甚至0.3333...個字體的顏色呢？
先看看效果，預覽網址

CodePen地址：codepen.io/itagn/pen/a…

從零開始

html

<div class="box">
  <div class="down">東東麼麼噠</div>
  <div class="up">東東麼麼噠</div>
</div>
複製代碼

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-size: 5em;
  width: 5em;
  height: 1.2em;
}
複製代碼

這裏涉及到兩個div了，一個紅豆色的div和一個淺藍色的div，並且內容都是"東東麼麼噠"
並且它們須要徹底重合，包括文字內容，字體大小，位置等等
這裏就涉及到層級問題了

第一個關鍵屬性 z-index: n    
複製代碼

.up, .down {
  position: absolute;
  height: 100%;
  line-height: 1;
}
.up {
   z-index: 2; 
}
.down {
  z-index: 1;
}
複製代碼

視覺分析來看

是滑動的的div設置了半透明，顏色結合的部分改變的顏色？
複製代碼

不對，滑動的div顏色是淺灰色，底色是紅豆色，是不能結合成淺藍色的
不是顏色的結合，那麼確定是自定義的顏色，那就是說淺藍色的文字自己就在滑動的div上面
若是div上面的字要顯示成圖裏面這樣，那麼必然是經過切割出來的

第二個關鍵屬性 overflow: hidden;   
複製代碼

.up的div處理成滑塊

.up {
  color: lightblue;
  z-index: 2;
  width: 1em;
  overflow: hidden;
  border-radius: 15%;
  background: #eee;
}
.down {
  color: indianred;
  z-index: 1;
}
複製代碼

這個時候回想一下輪播圖，是否是輪播圖也實現了相似的效果，ok，繼續往下
輪播圖滾動的是圖片序列，咱們反過來理解，滾動「窗口」
那麼咱們經過animation來製做動畫，經過改變left的值實現窗口的滾動

第三個關鍵屬性 animation
複製代碼

.up {
  animation: run 2.5s infinite;
  -webkit-animation: run 2.5s infinite;
}
@keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
@-webkit-keyframes run {
  0% { left: -1em; }
  100% { left: 5em; }
}
複製代碼

然而咱們發現一個div好像解決不了，由於窗口須要一個空白div，文字內容須要新的div
其實一個div能夠解決，咱們經過僞元素after或者僞元素before就能構造

第四個關鍵屬性 ::before || ::after
複製代碼

html結構變化，.up的div只作滑塊

<div class="box">
  <div class="down">東東麼麼噠</div>
  <div class="up"></div>
</div>
複製代碼

css變化

.up::before {
  content: "東東麼麼噠";
  position: absolute;
  width: 5em;
}
複製代碼

但是窗口在滾動也會影響僞元素的位置！
既然這樣，那麼咱們給僞元素也來和窗口運動剛剛相反的動畫吧，這樣相對瀏覽器不就是靜止了嗎...

.up::before {
  animation: run2 2.5s infinite;
  -webkit-animation: run2 2.5s infinite;
}
@keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
@-webkit-keyframes run2 {
  0% { left: 1em; }
  100% { left: -5em; }
}
複製代碼

以上不須要用到JavaScript，材料準備完畢！

可維護的優化

CodePen地址：優化後的代碼

列舉須要優化的點：

• 僞元素content的值與.down的div文字的DRY問題
• 如何經過JavaScript調整展現的總體大小
• css裏面反覆出現的相同的值，這樣不夠DRY
• 滑塊的運動軌跡一直有效處於文字的上面（即下次更換文字內容的時候，不須要更換滑動結束時候的left值）

咱們發現，不能經過JavaScript來改變僞元素的content
若是能經過修改JavaScript變量就能改變div的文字和僞元素的文字，那就行了！

答案是能夠的，css經過var()能夠獲取css變量，經過--屬性能夠設置css變量，那麼咱們把全部變量掛載到根屬性 :root 上面，就能夠獲取了

並且瀏覽器裏面能夠發現

document.querySelector(':root') === document.documentElement // true
複製代碼

說明這裏就是html的根屬性，接下來經過 document.documentElement.style.setProperty('--屬性', 值)既能夠保證代碼的可維護性，而後咱們把css代碼經過變量優化起來，所有導入到JavaScript的對象裏，儘可能作到DRY!