本文详解如何利用 CSS @property 自定义属性实现 navbar 滚动时从纯黑到径向渐变的真正双向平滑过渡，彻底解决“上滑回弹突变”问题，避免传统 class 切换导致的 background 渐变无法反向动画的缺陷。
本文详解如何利用 css `@property` 自定义属性实现 navbar 滚动时从纯黑到径向渐变的**真正双向平滑过渡**，彻底解决“上滑回弹突变”问题，避免传统 class 切换导致的 background 渐变无法反向动画的缺陷。
在实现粘性导航栏（sticky navbar）的滚动交互动画时，一个常见痛点是：当页面向下滚动，navbar 从纯黑色背景平滑过渡为半透明径向渐变（如 radial-gradient(circle, rgba(0,0,0,0.7) 70%, transparent)），视觉效果自然；但一旦向上滚动、触发 classList.remove("scrolled")，背景却会“啪”地一下硬切回纯黑——这是因为 CSS background 属性本身不支持对渐变参数（如颜色值、色标位置）做原生过渡动画，仅靠 transition: background 0.5s 实际无效，浏览器只能对整个 background 值做离散切换。
真正的解法是将渐变中可变的部分——中心色值（--c）和色标百分比（--p）——声明为受控的 CSS 自定义属性，并借助 @property 显式定义其类型与动画能力：
@property --p {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --c {
syntax: "<color>";
inherits: false;
initial-value: black;
}这样，--p 和 --c 就成为可被 transition 动画的“第一类公民”。navbar 样式即可基于它们动态构建渐变：
.navbar {
--p: 100%;
--c: black;
position: sticky;
top: 21px;
width: 100%;
/* 关键：用变量构建渐变，而非固定值 */
background: radial-gradient(circle, var(--c) var(--p), transparent);
transition: --p 0.5s ease, --c 0.5s ease; /* ✅ 可真正过渡 */
z-index: 1050;
}
.navbar.scrolled {
--p: 70%;
--c: rgba(0, 0, 0, 0.7);
}配合原有的 JavaScript 监听逻辑，即可实现完全对称的双向动画：
window.addEventListener("scroll", () => {
const navbar = document.querySelector(".navbar");
// 触发点保持一致：>21px 进入渐变态，≤21px 退回纯黑态
if (window.pageYOffset > 21) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled");
}
});⚠️ 注意事项与兼容性提醒：
-
@property是 CSS Houdini 的一部分，目前 Chrome / Edge 105+、Safari 16.4+ 支持良好，但 Firefox 尚未实现（截至 Firefox 128）。若需全浏览器兼容，可采用降级方案：- 使用
background-color+backdrop-filter: blur(10px)模拟通透感； - 或引入轻量 JS 库（如 anime.js）手动插值计算渐变字符串（性能稍低，但可控性强）。
- 使用
- 避免在
.scrolled中直接写background: radial-gradient(...)—— 这会覆盖变量绑定，导致过渡失效。 -
transition-timing-function建议统一使用ease或cubic-bezier(0.25, 0.46, 0.45, 0.94)等自然缓动，避免机械感。
通过将渐变“参数化 + 属性化 + 可动画化”，我们突破了 CSS 渐变静态声明的限制，让导航栏的视觉反馈真正具备物理般的惯性与连贯性——无论用户是快速下滑还是缓慢回滚，色彩融合始终丝滑如一。
