feat(语言切换): 为语言切换功能添加动画效果和视觉反馈

- 添加点击波纹动画效果增强交互体验
- 实现语言切换时的页面过渡动画
- 增加切换成功后的提示弹窗
- 为语言按钮添加国旗图标
- 优化下拉菜单的显示动画
- 添加内容淡入动画提升用户体验

Author: HuXin0817

index.html

@@ -1308,18 +1308,44 @@
         font-size: 0.9rem;
         font-weight: 500;
         backdrop-filter: blur(10px);
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* 添加点击波纹效果 */
+      .language-trigger::before {
+        content: "";
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        background: rgba(59, 130, 246, 0.3);
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        transition: width 0.6s, height 0.6s;
+        z-index: 0;
+      }
+
+      .language-trigger.clicked::before {
+        width: 200px;
+        height: 200px;
       }
 
       .language-trigger:hover {
         background: rgba(255, 255, 255, 0.1);
         border-color: rgba(59, 130, 246, 0.3);
         color: var(--text-primary);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
       }
 
       .language-trigger::after {
         content: "▼";
         font-size: 0.8rem;
         transition: transform 0.3s ease;
+        z-index: 1;
+        position: relative;
       }
 
       .language-switcher.show .language-trigger::after {
@@ -1340,15 +1366,15 @@
         backdrop-filter: blur(20px);
         opacity: 0;
         visibility: hidden;
-        transform: translateY(-10px);
+        transform: translateY(-10px) scale(0.95);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         z-index: 1000;
       }
 
       .language-switcher.show .language-dropdown {
         opacity: 1;
         visibility: visible;
-        transform: translateY(0);
+        transform: translateY(0) scale(1);
       }
 
       .lang-btn {
@@ -1366,26 +1392,65 @@
         font-size: 0.9rem;
         font-weight: 500;
         text-align: left;
+        position: relative;
+        overflow: hidden;
+      }
+
+      /* 语言按钮图标 */
+      .lang-btn::before {
+        content: "";
+        width: 20px;
+        height: 15px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+
+      .lang-btn[data-lang="zh"]::before {
+        content: "🇨🇳";
+        font-size: 16px;
+        width: auto;
+        height: auto;
+      }
+
+      .lang-btn[data-lang="en"]::before {
+        content: "🇺🇸";
+        font-size: 16px;
+        width: auto;
+        height: auto;
+      }
+
+      .lang-btn[data-lang="ja"]::before {
+        content: "🇯🇵";
+        font-size: 16px;
+        width: auto;
+        height: auto;
       }
 
       .lang-btn:hover {
         background: rgba(255, 255, 255, 0.1);
         color: var(--text-primary);
+        transform: translateX(4px);
       }
 
       .lang-btn.active {
         background: rgba(59, 130, 246, 0.2);
         color: #60a5fa;
         font-weight: 600;
+        transform: translateX(4px);
       }
 
-      /* 隐藏非当前语言的内容 */
+      /* 内容切换动画 */
       .lang-content {
         display: none;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
       }
 
       .lang-content.active {
         display: block;
+        animation: fadeInContent 0.5s ease-out forwards;
       }
 
       .lang-content.active.inline {
@@ -1399,6 +1464,49 @@
       .lang-content.active.grid {
         display: grid;
       }
+
+      @keyframes fadeInContent {
+        from {
+          opacity: 0;
+          transform: translateY(10px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* 语言切换成功提示 */
+      .language-toast {
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        background: rgba(59, 130, 246, 0.9);
+        color: white;
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        transform: translateX(100%);
+        transition: transform 0.3s ease;
+        z-index: 10000;
+      }
+
+      .language-toast.show {
+        transform: translateX(0);
+      }
+
+      /* 页面切换时的整体动画 */
+      .page-transition {
+        transition: all 0.3s ease;
+      }
+
+      .page-transition.switching {
+        opacity: 0.7;
+        transform: scale(0.98);
+      }
     </style>
   </head>
 
@@ -2301,10 +2409,17 @@ <h3 class="contact-subtitle">
     <script>
       // 语言切换功能
       let currentLang = "zh";
+      let isTransitioning = false;
 
       // 切换语言切换器显示/隐藏
       function toggleLanguageSwitcher() {
         const switcher = document.getElementById("languageSwitcher");
+        const trigger = switcher.querySelector(".language-trigger");
+
+        // 添加点击效果
+        trigger.classList.add("clicked");
+        setTimeout(() => trigger.classList.remove("clicked"), 600);
+
         switcher.classList.toggle("show");
       }
 
@@ -2313,58 +2428,104 @@ <h3 class="contact-subtitle">
         document.getElementById("languageSwitcher").classList.remove("show");
       }
 
+      // 显示切换成功提示
+      function showLanguageToast(langName) {
+        // 移除已存在的提示
+        const existingToast = document.querySelector(".language-toast");
+        if (existingToast) {
+          existingToast.remove();
+        }
+
+        // 创建新提示
+        const toast = document.createElement("div");
+        toast.className = "language-toast";
+        toast.textContent = `已切换到 ${langName}`;
+        document.body.appendChild(toast);
+
+        // 显示动画
+        setTimeout(() => toast.classList.add("show"), 100);
+
+        // 3秒后自动隐藏
+        setTimeout(() => {
+          toast.classList.remove("show");
+          setTimeout(() => toast.remove(), 300);
+        }, 3000);
+      }
+
       // 修改现有的switchLanguage函数
       function switchLanguage(lang) {
+        if (isTransitioning || currentLang === lang) return;
+
+        isTransitioning = true;
         currentLang = lang;
 
+        // 添加页面切换动画
+        document.body.classList.add("page-transition", "switching");
+
         // 更新触发按钮文本
         const triggerBtn = document.querySelector(".language-trigger");
         const langNames = {
           zh: "中文",
           en: "English",
           ja: "日本語",
         };
-        triggerBtn.textContent = langNames[lang];
 
-        // 更新下拉选项的激活状态
-        document.querySelectorAll(".lang-btn").forEach((btn) => {
-          btn.classList.remove("active");
-          if (btn.dataset.lang === lang) {
-            btn.classList.add("active");
-          }
-        });
+        setTimeout(() => {
+          triggerBtn.textContent = langNames[lang];
+
+          // 更新下拉选项的激活状态
+          document.querySelectorAll(".lang-btn").forEach((btn) => {
+            btn.classList.remove("active");
+            if (btn.dataset.lang === lang) {
+              btn.classList.add("active");
+            }
+          });
 
-        // 隐藏下拉菜单
-        hideLanguageSwitcher();
+          // 隐藏下拉菜单
+          hideLanguageSwitcher();
 
-        // 更新HTML lang属性
-        document.documentElement.lang =
-          lang === "zh" ? "zh-CN" : lang === "en" ? "en-US" : "ja-JP";
+          // 更新HTML lang属性
+          document.documentElement.lang =
+            lang === "zh" ? "zh-CN" : lang === "en" ? "en-US" : "ja-JP";
 
-        // 更新页面标题
-        const titles = {
-          zh: "RushDB - 无限进步",
-          en: "RushDB - Unlimited Progress",
-          ja: "RushDB - 無限の進歩",
-        };
-        document.title = titles[lang];
+          // 更新页面标题
+          const titles = {
+            zh: "RushDB - 无限进步",
+            en: "RushDB - Unlimited Progress",
+            ja: "RushDB - 無限の進歩",
+          };
+          document.title = titles[lang];
 
-        // 隐藏所有语言内容
-        document.querySelectorAll(".lang-content").forEach((el) => {
-          el.classList.remove("active");
-        });
+          // 隐藏所有语言内容
+          document.querySelectorAll(".lang-content").forEach((el) => {
+            el.classList.remove("active");
+          });
 
-        // 显示当前语言内容
-        document.querySelectorAll(`.lang-${lang}`).forEach((el) => {
-          el.classList.add("active");
-        });
+          // 显示当前语言内容
+          document.querySelectorAll(`.lang-${lang}`).forEach((el) => {
+            el.classList.add("active");
+          });
+
+          // 保存语言选择到localStorage
+          localStorage.setItem("rushdb-language", lang);
 
-        // 保存语言选择到localStorage
-        localStorage.setItem("rushdb-language", lang);
+          // 显示切换成功提示
+          showLanguageToast(langNames[lang]);
+
+          // 移除切换动画
+          document.body.classList.remove("switching");
+          setTimeout(() => {
+            document.body.classList.remove("page-transition");
+            isTransitioning = false;
+          }, 300);
+        }, 150);
       }
 
       // 初始化语言
       document.addEventListener("DOMContentLoaded", function () {
+        // 添加页面切换类
+        document.body.classList.add("page-transition");
+
         const savedLang = localStorage.getItem("rushdb-language") || "zh";
         switchLanguage(savedLang);