From ae446b77848438e7995ae0677eaad44d9e16855d Mon Sep 17 00:00:00 2001 From: hongjli <3117313295@qq.com> Date: 星期二, 08 四月 2025 19:33:16 +0800 Subject: [PATCH] 动画优化 --- src/components/layout/Navbar.tsx | 20 ++++++++------------ 1 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 35e655f..7a4c186 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -188,7 +188,7 @@ {/* 鐧诲綍鎸夐挳 */} <div className="relative group"> - <Link href="/login" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button"> + <a href="/login" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button"> <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">鐧诲綍</span> {/* 閲忓瓙鍏夌嚎鏁堟灉 */} @@ -201,20 +201,18 @@ {/* 閲忓瓙鏁版嵁娴� */} <div className="absolute top-0 h-full w-full"> - <div className="absolute left-[20%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.1s'}}></div> - <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.2s'}}></div> - <div className="absolute left-[80%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.3s'}}></div> + <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div> </div> {/* 閲忓瓙杈圭紭鏁堟灉 */} - <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> + <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> </div> - </Link> + </a> </div> {/* 娉ㄥ唽鎸夐挳 */} <div className="relative group -ml-2"> - <Link href="/register" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button"> + <a href="/register" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button"> <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300 quantum-pulse">娉ㄥ唽</span> {/* 閲忓瓙鍏夌嚎鏁堟灉 */} @@ -227,15 +225,13 @@ {/* 閲忓瓙鏁版嵁娴� */} <div className="absolute top-0 h-full w-full"> - <div className="absolute left-[20%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.1s'}}></div> - <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.2s'}}></div> - <div className="absolute left-[80%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.3s'}}></div> + <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div> </div> {/* 閲忓瓙杈圭紭鏁堟灉 */} - <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> + <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div> </div> - </Link> + </a> </div> </div> -- Gitblit v1.9.3