像濾鏡一樣改變字型顏色
標題是什麼意思？可能一開始覺得怪怪的，字型顏色不就是一個css的樣式就改變了嗎？
css樣式是改變整個字型的顏色，但是怎麼改變半個甚至 0.3333... 個字型的顏色呢？
先看看效果，預覽網址
CodePen地址： ofollow,noindex">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!