feat: backdrop filter

wkylin · Jan 9, 2025 · 6ab8aa0 · 6ab8aa0
1 parent ab02d79
commit 6ab8aa0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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 {