卷轴改变文字背景色
这篇教学会使用 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>
移动背景方法 1、使用背景位置与尺寸
如果要移动“双色背景的位置”，第一种方法可以使用 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>
移动背景方法 2、自订属性
除了改变背景位置，由于背景是“渐层色”，必须使用“自订属性”才能要让渐层色发生“转场”或“动画”，首先设定一个长度类型的自订属性 --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 控制动画进度，实现“文字出现时，才会动态改变文字背景色”的效果，下方范例会改用 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>
小结
透过用户拖拉卷轴时才出现文字背景，会产生非常显眼的提示效果，可以让自己的网站内容更为吸睛，不过相对这种做法仍然会有一些跨浏览器的限制，建议需要搭配原本的提示效果一起实作比较妥当。
微信扫码关注
抖音扫码关注