可用CSS变量配合hsl()与滚动位置实现颜色自然过渡：将HSL分量映射至滚动进度，通过scroll-timeline（Chrome 115+）或JS动态更新变量，注意H值跨360°需归一化处理。
用 CSS 变量配合 hsl() 和滚动位置（scroll-timeline 或 JS 控制）可实现颜色随滚动自然过渡。核心思路是：把 HSL 的某个分量（如色相 H、饱和度 S 或亮度 L）映射到滚动进度，再通过 CSS 变量实时更新，让元素颜色平滑变化。
用 CSS 滚动驱动动画（现代方案：scroll-timeline）
Chrome 115+ 支持原生滚动驱动动画，无需 JS。关键步骤：
- 定义一个
@scroll-timeline，绑定滚动容器（如body），指定起止滚动位置（如0%到100%） - 用
--hue等 CSS 变量作为动画属性，在@keyframes中改变其值 - 在目标元素上用
animation关联该 timeline，并设置animation-timeline: --scroll-timeline-name
示例：让标题色相从 200°（蓝）渐变到 30°（橙）
@scroll-timeline scroll-progress {
source: selector(body);
start: 0%;
end: 100%;
}
<p>@keyframes hue-shift {
from { --hue: 200; }
to { --hue: 30; }
}</p><p>h1 {
--hue: 200;
color: hsl(var(--hue), 80%, 60%);
animation: hue-shift 1s linear;
animation-timeline: scroll-progress;
}用 JavaScript + CSS 变量（兼容性更好）
适合需要精细控制或兼容旧浏览器的场景。监听 scroll，计算滚动百分比，动态更新 CSS 变量：
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.scrollTop / (document.body.scrollHeight - window.innerHeight)得到 0–1 的滚动比 - 将该值线性映射到目标 HSL 分量区间（如
H = 200 + scrollPercent * (30 - 200)） - 用
document.documentElement.style.setProperty('--hue', newHue)更新变量
注意：加 throttle 防抖，避免频繁触发；HSL 值建议取整，避免小数过多影响性能。
只改亮度（L）或饱和度（S）更安全
相比大幅调色相（H），调整 L 或 S 更易保持可读性和视觉协调性：
- 深色背景 → 浅色文字：
--lightness: calc(30% + var(--scroll) * 40%) - 降低干扰感：滚动越深，
--saturation: calc(100% - var(--scroll) * 30%) - HSL 的 L 推荐范围 20%–90%，S 推荐 40%–100%，避免过灰或刺眼
搭配 backdrop-filter 或渐变增强层次
单靠文字变色略单调。可同步驱动其他属性提升体验：
- 给容器加
backdrop-filter: blur(calc(var(--scroll) * 10px))，滚动时模糊渐强 - 用
background: linear-gradient(hsl(var(--hue), 70%, 60%), hsl(calc(var(--hue) + 60), 70%, 50%))做动态渐变背景 - 结合
transition: color 0.3s ease, background 0.3s ease让变化更柔和
基本上就这些。重点是把滚动进度变成一个可控数值，再喂给 HSL 的某一项——它天然支持数值插值，过渡顺滑，写法也干净。不复杂但容易忽略的是：别让 H 跨过 360° 边界（比如从 350° 直接到 10°），否则会反向跳变，要用 JS 做归一化或改用插值函数处理。
