当前位置：首页 > 文章列表 > 文章 > 前端 > CSS滚动变色：变量与HSL动态实现

CSS滚动变色：变量与HSL动态实现

2026-01-04 23:11:36 0浏览收藏

用 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%;
}
@keyframes hue-shift {
from { --hue: 200; }
to   { --hue: 30; }
}
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 做归一化或改用插值函数处理。

今天关于《CSS滚动变色：变量与HSL动态实现》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！