如何实现导航栏渐变过渡效果（而非突兀切换）-html教程-PHP中文网

如何实现导航栏渐变过渡效果（而非突兀切换）

本文详解如何使用 CSS @property 自定义属性配合 transition，让粘性导航栏在滚动时平滑地在纯色与径向渐变之间过渡，彻底解决“上滑回弹”时颜色突变的问题。

本文详解如何使用 css `@property` 自定义属性配合 `transition`，让粘性导航栏在滚动时平滑地在纯色与径向渐变之间过渡，彻底解决“上滑回弹”时颜色突变的问题。

在构建现代响应式网站时，粘性导航栏（sticky navbar）的视觉动效至关重要。许多开发者遇到一个常见问题：当页面向下滚动时，导航栏能通过 classList.add("scrolled") 平滑地从纯黑背景过渡为带透明度的径向渐变；但一旦向上滚动、触发 classList.remove("scrolled")，背景却“啪”地一下硬切回黑色——缺乏反向过渡动画，破坏了用户体验的连贯性。

根本原因在于：CSS 原生不支持对渐变（background: radial-gradient(...)）中的颜色值或长度单位（如百分比）做直接过渡。传统写法中 .navbar { background: black; } 和 .navbar.scrolled { background: radial-gradient(...); } 是两个完全不同的背景声明，浏览器无法插值计算中间状态，因此移除 class 时过渡失效。

✅ 正确解法是引入 CSS 自定义属性（CSS Properties） + @property 规则，将渐变中可变的参数（颜色 --c 和位置百分比 --p）声明为可动画的受控变量：

@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --c {
  syntax: "<color>";
  inherits: false;
  initial-value: black;
}

.navbar {
  --p: 100%;
  --c: black;
  position: sticky;
  top: 21px;
  width: 100%;
  /* 关键：用 var() 动态构建渐变，使 transition 生效 */
  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);
}</color></percentage>

配合原有 JavaScript 逻辑（无需修改），即可实现双向平滑过渡：

window.addEventListener("scroll", () => {
  const navbar = document.querySelector(".navbar");
  if (window.pageYOffset > 21) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled");
  }
});

⚠️ 注意事项：

@property 目前 不支持 Firefox（截至 2024 年），生产环境需添加降级方案（如仅对 Chrome/Edge/Safari 启用该动效，Firefox 回退为基础淡入淡出或保持静态）；
确保 transition 属性明确指定要过渡的自定义属性名（如 --p, --c），不可写作 all 或 background；
radial-gradient 中 transparent 必须显式书写，避免浏览器解析歧义；
若需兼容更广浏览器，可改用 background-color: rgba() + backdrop-filter: blur() 模拟半透效果，但无法实现真正的径向渐变形态。