From 6ab8aa0dd97dcb3ec059cebcd3472236add9ece7 Mon Sep 17 00:00:00 2001
From: "wkylin.w@gmail.com" <wkylin.w@gmail.com>
Date: Thu, 9 Jan 2025 13:40:00 +0800
Subject: [PATCH] feat: backdrop filter

---
 src/pages/motion/index.jsx         | 2 +-
 src/pages/motion/index.module.less | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/motion/index.jsx b/src/pages/motion/index.jsx
index 436e7e92..02c10ac6 100644
--- a/src/pages/motion/index.jsx
+++ b/src/pages/motion/index.jsx
@@ -203,7 +203,7 @@ const ParallaxVert = () => {
     })
   }, [activeScrollY])
 
-  // 处理点击 navitem 滚动到对应 section 的逻辑
+  // 处理点击 navItem 滚动到对应 section 的逻辑
   const handleNavItemClick = (index) => {
     const sectionId = `${navItems[index].toLowerCase()}-section`
     const section = sectionRefs.current[sectionId]
diff --git a/src/pages/motion/index.module.less b/src/pages/motion/index.module.less
index 919f5ad4..8cb82594 100644
--- a/src/pages/motion/index.module.less
+++ b/src/pages/motion/index.module.less
@@ -2,20 +2,24 @@
   position: sticky;
   top: 0;
   right: 0;
-  background-color: #aaa;
+  background-color: rgb(0 0 0 / 20%);
+  backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
   z-index: 10;
 
   ul {
     display: flex;
     justify-content: space-around;
     align-items: center;
+    padding: 10px 0;
   }
 
   .navItem {
     cursor: pointer;
-    padding: 5px 10px;
+    padding: 5px 20px;
     transition: all 0.3s ease;
     color: #fff;
+    border-radius: 15px;
   }
 
   .navItemActive {