本文详解如何利用 CSS @property 自定义属性 + radial-gradient 实现 navbar 背景从纯黑到半透明径向渐变的双向可逆动画，彻底解决回滚时颜色“突变”问题，确保上下滚动均具备一致、流畅的视觉融合效果。
本文详解如何利用 css `@property` 自定义属性 + `radial-gradient` 实现 navbar 背景从纯黑到半透明径向渐变的**双向可逆动画**，彻底解决回滚时颜色“突变”问题，确保上下滚动均具备一致、流畅的视觉融合效果。
在网页开发中，为粘性导航栏（sticky navbar）添加滚动触发的背景渐变效果是常见需求。但许多开发者会遇到一个典型问题：向下滚动时，navbar 从纯黑平滑过渡为带透明度的径向渐变；而向上滚动返回顶部时，背景却“啪”地一下硬切回黑色——即所谓“pop”现象。这本质上是因为 CSS 的 background 属性不支持对渐变参数（如色值、位置、百分比）做原生动画，仅靠 transition: background 0.5s 无法驱动 radial-gradient(...) 中的动态值变化。
✅ 正确解法：使用 @property 定义可动画的自定义 CSS 属性
现代 CSS 提供了 @property 规则（Chrome 102+、Edge 102+、Safari 16.4+ 支持，Firefox 尚未支持），允许我们声明类型安全、可继承、可动画的自定义属性。借助它，我们可以将渐变中的关键变量（如中心色值 --c 和透明截止点 --p）抽离为可被 transition 驱动的属性：
@property --p {
syntax: "<percentage>";
inherits: false;
initial-value: 100%;
}
@property --c {
syntax: "<color>";
inherits: false;
initial-value: black;
}</color></percentage>
随后，在 .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 切换 .scrolled 类时，--p 和 --c 会以 ease 缓动函数平滑插值，从而驱动整个 radial-gradient 的形态与色彩同步过渡——无论添加还是移除 .scrolled，动画方向完全对称，彻底消除“回弹”感。
?️ 完整实现要点
-
JavaScript 保持简洁：无需监听 scroll 事件做复杂阈值判断，只需根据滚动位置切换类名：
window.addEventListener("scroll", () => { const navbar = document.querySelector(".navbar"); if (window.pageYOffset > 21) { navbar.classList.add("scrolled"); } else { navbar.classList.remove("scrolled"); } }); 兼容性兜底建议（针对 Firefox 或旧浏览器）：
若需广泛兼容，可降级为opacity+backdrop-filter模糊叠加方案，或使用 SVG 渐变作为background-image并通过transform: translateY()模拟深度感（非推荐，牺牲语义性）。但对主流现代浏览器，@property是最优雅、性能最优的原生方案。-
注意事项：
- 确保
radial-gradient的transparent部分与页面背景色协调，避免视觉割裂； -
transition-timing-function建议统一使用ease或cubic-bezier(.4,0,.2,1)，避免linear导致生硬； -
@property必须定义在<style></style>标签内或外部 CSS 文件顶部，不可嵌套于媒体查询或选择器中。
- 确保
✅ 总结
通过 @property 将渐变参数转化为可动画的 CSS 自定义属性，再结合 transition 对其进行控制，是实现 navbar 渐变真正双向平滑融合的现代标准方案。它不仅解决了“上滚突变”痛点，还提升了代码可维护性与动画性能。只要目标用户覆盖主流 Chromium/Safari 浏览器，该方案即可放心落地——让每一次滚动，都成为细腻、连贯的视觉体验。
