最近電視又播了海底總動員第二集，看到那隻章魚哥跑到哪就變色到哪，真不愧是變色界的霸主！看著牠的變色，讓我覺得如果用純 CSS，讓捲軸拖拉到哪文字就變色到哪，是否也可稱作文字變色界的霸主呢？所以就立刻做了這個效果來看看！但完全沒有霸主的感覺就是了....
這篇教學會使用 CSS 的漸層色讓文字產生雙色背景，並運用背景位置、背景尺寸、自訂屬性、動畫，產生「可以改變位置」的顏色背景，最後透過 animation-timeline，讓滾動捲軸時可以改變文字背景色，凸顯重要的文字。
注意，這個效果目前僅支援 Chrome 和 Edge，其他部分瀏覽器或行動裝置瀏覽器可能不支援。
透過 CSS 的線性漸層函式 linear-gradient()，可以讓背景產生漸層色效果，如果不同顏色的位置重疊，就會產生直接切換不同顏色的效果，下方範例會替 em 元素加上紅色和黃色的雙色背景。
<!-- HTML 程式碼 -->
<div class="main">
<h1>關於這個範例</h1>
捲軸往下拉，可以看見凸顯文字的效果
<h2>關於 STEAM 教育學習網</h2>
這是一個針對 STEAM 教育所設立的網站，<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
<h2>關於這個網站的規劃 </h2>
<em>STEAM 教育學習網目前規劃有三個階段</em>，希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 )，雖然無法做到盡善盡美，但我也會盡最大的努力去完成。
<h2>關於我</h2>
大家好，我是 OXXO，是個即將邁入中年的斜槓青年。從多年的工作經驗，<em>讓我具備了 UI＆UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>，近年來，我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計＆創意總監」的職務後，讓我更能專注在文字、創作和學習上，<em>凡是「美、有趣、創新」的東西，都是我熱愛與追求的！</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求，都可以與我聯繫，一起來做點又酷、又好玩、又有創意的東西吧！
<h2>CSS 教學</h2>
CSS 教學會透過一系列的文章和許多由淺入深的範例，<em>介紹 CSS 的相關知識，從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>，希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師，提供非常有幫助的知識內容。
</div>
<!-- CSS 程式碼 -->
<style>
.main {
box-sizing: border-box;
border:1px solid #000;
font-size: 20px;
line-height: 2;
}
em {
font-style: normal;
background: linear-gradient(to right, #fc0 50%, #f00 50%); /* 位置重疊就不會有漸層 */
}
</style>
如果要移動「雙色背景的位置」，第一種方法可以使用 background-position 搭配 background-size，當背景尺寸設為「200% 100%」時，表示雙色漸層中兩種顏色所佔的寬度變成「跟元素同寬」，這時候只需要改變背景水平方向的位置，就能讓雙色背景移動，下方範例會延伸原本的程式碼，加入背景位置和背景尺寸，並用動畫的方式表現移動的狀況。
<!-- HTML 程式碼 -->
<div class="main">
<h1>關於這個範例</h1>
捲軸往下拉，可以看見凸顯文字的效果
<h2>關於 STEAM 教育學習網</h2>
這是一個針對 STEAM 教育所設立的網站，<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
<h2>關於這個網站的規劃 </h2>
<em>STEAM 教育學習網目前規劃有三個階段</em>，希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 )，雖然無法做到盡善盡美，但我也會盡最大的努力去完成。
<h2>關於我</h2>
大家好，我是 OXXO，是個即將邁入中年的斜槓青年。從多年的工作經驗，<em>讓我具備了 UI＆UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>，近年來，我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計＆創意總監」的職務後，讓我更能專注在文字、創作和學習上，<em>凡是「美、有趣、創新」的東西，都是我熱愛與追求的！</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求，都可以與我聯繫，一起來做點又酷、又好玩、又有創意的東西吧！
<h2>CSS 教學</h2>
CSS 教學會透過一系列的文章和許多由淺入深的範例，<em>介紹 CSS 的相關知識，從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>，希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師，提供非常有幫助的知識內容。
</div>
<!-- CSS 程式碼 -->
<style>
.main {
box-sizing: border-box;
border:1px solid #000;
font-size: 20px;
line-height: 2;
}
em {
font-style: normal;
background: linear-gradient(to right, #fc0 50%, #f00 50%);
background-size: 200% 100%; /* 寬為元素寬度的 2 倍 */
background-position: 100%; /* 初始位置位於最右邊 */
animation: oxxo linear alternate infinite 2s; /* 動畫反覆播放無限次 */
}
@keyframes oxxo {
0% {background-position: 100%;}
100% {background-position: 0;}
}
</style>
除了改變背景位置，由於背景是「漸層色」，必須使用「自訂屬性」才能要讓漸層色發生「轉場」或「動畫」，首先設定一個長度類型的自訂屬性 --x，並設定漸層色位置都讀取這個屬性，接著透過動畫的方式修改屬性內容，也可以實現雙色背景移動的效果。
<!-- HTML 程式碼 -->
<div class="main">
<h1>關於這個範例</h1>
捲軸往下拉，可以看見凸顯文字的效果
<h2>關於 STEAM 教育學習網</h2>
這是一個針對 STEAM 教育所設立的網站，<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
<h2>關於這個網站的規劃 </h2>
<em>STEAM 教育學習網目前規劃有三個階段</em>，希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 )，雖然無法做到盡善盡美，但我也會盡最大的努力去完成。
<h2>關於我</h2>
大家好，我是 OXXO，是個即將邁入中年的斜槓青年。從多年的工作經驗，<em>讓我具備了 UI＆UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>，近年來，我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計＆創意總監」的職務後，讓我更能專注在文字、創作和學習上，<em>凡是「美、有趣、創新」的東西，都是我熱愛與追求的！</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求，都可以與我聯繫，一起來做點又酷、又好玩、又有創意的東西吧！
<h2>CSS 教學</h2>
CSS 教學會透過一系列的文章和許多由淺入深的範例，<em>介紹 CSS 的相關知識，從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>，希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師，提供非常有幫助的知識內容。
</div>
<!-- CSS 程式碼 -->
<style>
.main {
box-sizing: border-box;
border:1px solid #000;
font-size: 20px;
line-height: 2;
}
/* 建立自訂屬性 */
@property --x {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
em {
font-style: normal;
background: linear-gradient(to right, #fc0 var(--x), #f00 var(--x)); /* 讀取自訂屬性 */
animation: oxxo linear alternate infinite 2s; /* 動畫反覆播放無限次 */
}
@keyframes oxxo {
0% {--x: 0%;} /* 修改自訂屬性 */
100% {--x: 100%;} /* 修改自訂屬性 */
}
</style>
不論上述哪種方式，只要可以用動畫的方式讓雙色背景發生移動，就可以利用 animation-timeline 控制動畫進度，實現「文字出現時，才會動態改變文字背景色」的效果，下方範例會改用 animation-timeline: view() 的方式控制動畫進度，設定距離下方 50px 時會開始動畫 0% 進度，直到最末端距離上方 100px 時為動畫 100% 進度，此外也有調整一些 CSS 細節，用 .main 產生捲軸模擬視窗。
特別注意，因為
inline顯示類型的元素無法設定「高度」，且根據行內容器排版規則 ( IFC )，會由行框包覆所有內容，因此如果有兩個以上的行內元素需要套用改變背景色效果，會發生第一個效果完成後，後續的效果也跟著一起完成的狀況，但如果兩個行內元素中間有區塊容器分隔，就會各自獨立不會互相影響 ( 參考「CSS 元素排版方式」 )。
<!-- HTML 程式碼 -->
<div class="main">
<h1>關於這個範例</h1>
捲軸往下拉，可以看見凸顯文字的效果
<h2>關於 STEAM 教育學習網</h2>
這是一個針對 STEAM 教育所設立的網站，<em>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識</em>。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，<em>希望對於想要自學的學生、家長或老師有所幫助</em>。
<h2>關於這個網站的規劃 </h2>
<em>STEAM 教育學習網目前規劃有三個階段</em>，希望能涵蓋 STEAM 教育的各個面向 ( 還有一些我擅長的網頁領域 )，雖然無法做到盡善盡美，但我也會盡最大的努力去完成。
<h2>關於我</h2>
大家好，我是 OXXO，是個即將邁入中年的斜槓青年。從多年的工作經驗，<em>讓我具備了 UI＆UX 設計、網頁前端技術、網路行銷、SEO、產品研發...等專長</em>，近年來，我也擔任過不少研討會的講者、研習授課講師和產品顧問職務。自從卸下了「設計＆創意總監」的職務後，讓我更能專注在文字、創作和學習上，<em>凡是「美、有趣、創新」的東西，都是我熱愛與追求的！</em>如果大家有課程講師、研習授課、寫作、書籍出版、產品顧問、網站顧問...等需求，都可以與我聯繫，一起來做點又酷、又好玩、又有創意的東西吧！
<h2>CSS 教學</h2>
CSS 教學會透過一系列的文章和許多由淺入深的範例，<em>介紹 CSS 的相關知識，從 CSS 的基本概念、選擇器的應用一直到排版佈局、動畫效果都有完整介紹</em>，希望對於網頁初學者、網頁設計師、甚至是網頁前端工程師，提供非常有幫助的知識內容。
</div>
<!-- CSS 程式碼 -->
<style>
.main {
box-sizing: border-box;
border:1px solid #000;
font-size: 20px;
line-height: 2;
width: 500px;
height: 400px;
overflow: hidden scroll; /* 超出範圍隱藏，產生 y 軸捲軸 */
padding: 100px 20px 300px; /* 讓高度高一點 */
}
@property --x {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
em {
font-style: normal;
background: linear-gradient(to right, #fc0 var(--x), #f000 var(--x));
animation: oxxo linear forwards; /* 修改動畫，結束時停留在最後一格 */
animation-timeline: view(100px 50px); /* 動畫進度 */
}
@keyframes oxxo {
0% {--x: 0%;}
100% {--x: 100%;}
}
</style>
透過使用者拖拉捲軸時才出現文字背景，會產生非常顯眼的提示效果，可以讓自己的網站內容更為吸睛，不過相對這種做法仍然會有一些跨瀏覽器的限制，建議需要搭配原本的提示效果一起實作比較妥當。
- 原文參考：CSS 捲軸改變文字背景色
- 延伸閱讀：CSS 教學大全
iThome鐵人賽
看影片追技術
看更多