diff --git a/components/ArticleDescriptionCards.vue b/components/ArticleDescriptionCards.vue
index cc10ff6..42f7e9f 100644
--- a/components/ArticleDescriptionCards.vue
+++ b/components/ArticleDescriptionCards.vue
@@ -143,7 +143,7 @@ function updateRule() {
 
 <template>
   <div>
-    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
       <div class="text-2xl ml-1 flex items-center">
         <Icon class="mr-2" name="material-symbols:category"/>
         类型
@@ -162,7 +162,7 @@ function updateRule() {
         </div>
       </div>
     </div>
-    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-4">
       <div class="text-2xl ml-1 flex items-center">
         <Icon class="mr-2" name="material-symbols:book"/>
         分类
@@ -185,7 +185,7 @@ function updateRule() {
         <div>{{ count }}</div>
       </div>
     </div>
-    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5 mt-4">
+    <div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-4">
       <div class="text-2xl ml-1 flex items-center">
         <Icon class="mr-2" name="material-symbols:bookmarks"/>
         标签
@@ -194,7 +194,7 @@ function updateRule() {
       <div class="flex flex-wrap">
         <div
             v-for="([name,count],index) of tags" :key="index"
-            class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-all duration-300"
+            class="flex items-center justify-between text-[15px] pl-2 pr-2 m-1 rounded-2xl shadow-[0_0_0_1px_#888] hover:text-sky-400 dark:hover:text-[#cccaff] hover:shadow-[0_0_0_1px_#00bcff] dark:hover:shadow-[0_0_0_1px_#cccaff] transition-shadow duration-300"
             :class="{'text-old-neutral-400': !tagsEnableStatus[index]}"
             @click="updateTagEnableStatus(index)"
         >
diff --git a/components/PersonalCard.vue b/components/PersonalCard.vue
index 1cb4419..88f7ead 100644
--- a/components/PersonalCard.vue
+++ b/components/PersonalCard.vue
@@ -4,7 +4,7 @@
 
 <template>
 <div>
-  <div class="bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500 p-5">
+  <div class="bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
     Author: Lichx
     <div>
     Contact me:
diff --git a/components/ReadonlyMdEditor.vue b/components/ReadonlyMdEditor.vue
index ff1c547..cd2260a 100644
--- a/components/ReadonlyMdEditor.vue
+++ b/components/ReadonlyMdEditor.vue
@@ -22,14 +22,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
+  <div class="pt-0 bg-old-neutral-200 dark:bg-old-neutral-800">
     <MdPreview
         v-if="mounted"
         :key="editorId + '-' + colorMode"
     :editor-id="editorId"
     :theme="colorMode"
     :model-value="eraseHeaderMarkdown"
-    class="transition-all duration-500 max-w-full"
+    class="max-w-full"
     />
   </div>
 </template>
diff --git a/layouts/UserLayout.vue b/layouts/UserLayout.vue
index 2dfce42..bbd2d93 100644
--- a/layouts/UserLayout.vue
+++ b/layouts/UserLayout.vue
@@ -69,55 +69,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bg-old-neutral-50 dark:bg-[#0b0d0d] w-full min-h-[100vh] h-full transition-colors duration-500">
+  <div class="bg-old-neutral-50 dark:bg-[#0b0d0d] w-full min-h-[100vh] h-full">
     <UApp>
       <div
           :class=" (collapsed ? 'h-[20vh]': 'h-[40vh]')"
-          class="flex flex-col relative transition-all duration-500 ease-in-out" @mouseenter="() => {
+          class="flex flex-col relative transition-[height] duration-500 max-h-80">
+        <!-- header -->
+        <div
+             v-if="mounted"
+             @mouseenter="() => {
           if(scrollY === 0) {
             collapsed = false;
           }
-        }"
-          @mouseleave="collapsed = true">
-        <!-- header -->
-        <div v-if="mounted">
-          <Transition
-              enter-active-class="transition-opacity duration-500 ease-in-out"
-              enter-from-class="opacity-0"
-              enter-to-class="opacity-100"
-              leave-active-class="transition-opacity duration-500 ease-in-out"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-          >
+        }" @mouseleave="collapsed = true">
+          <div
+              v-if="colorMode === 'light'"
+              class="flex w-full h-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
+            <slot name="header"/>
+          </div>
+          <div
+              v-else
+              class="flex w-full h-full max-h-80 absolute bg-[url('/anime-8788959.webp')] bg-cover bg-center">
+            <slot name="header"/>
+          </div>
+          <!-- header picture -->
+          <div v-if="isScrollDown">
             <div
                 v-if="colorMode === 'light'"
-                class="flex h-full w-full absolute bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top ">
-              <slot name="header"/>
-            </div>
+                class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.webp')] bg-cover bg-top"/>
             <div
                 v-else
-                class="flex h-full w-full absolute bg-[url('/anime-8788959.jpg')] bg-cover bg-center">
-              <slot name="header"/>
-            </div>
-          </Transition>
-          <!-- header picture -->
-          <Transition
-              enter-active-class="transition-opacity duration-500 ease-in-out"
-              enter-from-class="opacity-0"
-              enter-to-class="opacity-100"
-              leave-active-class="transition-opacity duration-500 ease-in-out"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-          >
-            <div v-if="isScrollDown">
-              <div
-                  v-if="colorMode === 'light'"
-                  class="opacity-80 max-h-[48px] flex w-full h-full fixed bg-[url('/79d52228c770808810a310115567e6790380823a.png')] bg-cover bg-top"/>
-              <div
-                  v-else
-                  class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.jpg')] bg-cover bg-center"/>
-            </div>
-          </Transition>
+                class="opacity-20 max-h-[48px] flex w-full h-full fixed bg-[url('/anime-8788959.webp')] bg-cover bg-center"/>
+          </div>
         </div>
         <!-- navbar -->
         <div
@@ -127,8 +110,8 @@ onMounted(() => {
               <slot name="navbarLeft" :is-scroll-down="isScrollDown"/>
             </div>
             <div
-                class="transition-all duration-500 flex 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-10/12">
-                <UNavigationMenu v-if="mounted" :items="items" :class="colorMode" class="w-full"/>
+                class="transition-[width] duration-500 flex 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-10/12">
+              <UNavigationMenu v-if="mounted" :items="items" :class="colorMode" class="w-full"/>
               <div v-else class="w-full h-12 animate-pulse"></div>
             </div>
             <div class="flex-1 overflow-hidden">
@@ -148,10 +131,10 @@ onMounted(() => {
 
       </div>
       <!-- content -->
-      <div class="flex justify-center items-center  duration-500 bg-white dark:bg-[#16191b] h-full">
+      <div class="flex justify-center items-center bg-white dark:bg-[#16191b] h-full">
         <div
             :class="collapsed ? 'min-h-[80vh]' : 'min-h-[60vh]'"
-            class="transition-all duration-500 ease-in-out 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-11/12">
+            class="transition-[width] duration-500 ease-in-out 2xl:w-[1240px] xl:w-[1020px] lg:w-[964px] md:w-[708px] sm:w-[580px] w-11/12">
           <slot name="content"/>
         </div>
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index 676e63d..95e2f6e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import useColorModeStore from '~/stores/colorModeStore';
 import breakpointsHelper from '~/utils/BreakpointsHelper';
+import ThemeChange from '~/pages/index/components/ThemeChange.vue';
 
 const hitokoto = ref('加载中...');
 
@@ -31,31 +31,8 @@ onMounted(async () => {
     <template #navbarRight>
       <div class="flex items-center h-full">
         <div class="flex-1"/>
-        <div class="flex-1 flex  items-center justify-end duration500 ease-in-out">
-          <Transition
-              mode="out-in"
-              enter-active-class="transition-opacity duration-300 ease-in-out"
-              enter-from-class="opacity-0"
-              enter-to-class="opacity-100"
-              leave-active-class="transition-opacity duration-300 ease-in-out"
-              leave-from-class="opacity-100"
-              leave-to-class="opacity-0"
-          >
-            <Icon
-                v-if="useColorModeStore().colorMode === 'dark'"
-                key="dark"
-                name="material-symbols:dark-mode"
-                class="text-2xl cursor-pointer mr-5"
-                @click="() => useColorModeStore().toggleColorMode()"
-            />
-            <Icon
-                v-else
-                key="light"
-                name="material-symbols:clear-day-rounded"
-                class="text-2xl cursor-pointer mr-5"
-                @click="() => useColorModeStore().toggleColorMode()"
-            />
-          </Transition>
+        <div class="flex-1 flex items-center justify-end ease-in-out">
+          <ThemeChange />
         </div>
       </div>
     </template>
diff --git a/pages/index/about/compoents/AuthorDescription.vue b/pages/index/about/compoents/AuthorDescription.vue
index 8c143dd..2558c5f 100644
--- a/pages/index/about/compoents/AuthorDescription.vue
+++ b/pages/index/about/compoents/AuthorDescription.vue
@@ -11,18 +11,18 @@ onMounted(() => {
 
 <template>
   <div>
-    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
       <div class="text-2xl pb-2">关于作者</div>
       lichx，目前就读于武汉理工大学，技术涉猎广泛但不精，仍在持续学习中 <br/>
     </div>
-    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
       <div class="text-2xl pb-2">技术栈（相对熟练度）</div>
       <TechStackCard
           v-if="mounted" async-key="about page" :tech-stack="techStack"
           :tech-stack-percent="techStackPercent" :tech-stack-icon-names="techStackIconNames"
           :tech-stack-theme-colors="techStackThemeColors"/>
     </div>
-    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3 transition-colors duration-300">
+    <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 mt-3">
       <div class="text-2xl pb-2">在其他渠道关注 / 联系我</div>
       <a href="https://github.com/li-chx" title="github，不常用">
         <icon name="mdi:github" class="inline-block w-10 h-10 mr-4"/>
diff --git a/pages/index/about/compoents/SiteDescription.vue b/pages/index/about/compoents/SiteDescription.vue
index 7bc933a..540c48b 100644
--- a/pages/index/about/compoents/SiteDescription.vue
+++ b/pages/index/about/compoents/SiteDescription.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5 transition-colors duration-300">
+  <div class="light:bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
     <div class="text-2xl pb-2">关于本站</div>
     本站，随机存取，起这个名字纯粹是因为作者想不出来了。最后基于我对该网站的需求，决定叫随机存取<br/>
     这个网站最重要的还是记录我认为有趣的 学习 / 调试 过程，便于我随时取用，所以写的时候完全就是梦到哪写到哪<br/>
diff --git a/pages/index/archive/index.vue b/pages/index/archive/index.vue
index bac4e9f..e28cdb3 100644
--- a/pages/index/archive/index.vue
+++ b/pages/index/archive/index.vue
@@ -31,14 +31,14 @@ const choiceItems = ref<RadioGroupItem>([
   <div>
     <div class="table w-full mt-6 mb-6">
       <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
-        <div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 overflow-hidden">
+        <div class="relative duration-500 transition-[width] xl:w-80 w-0 mr-2/3 overflow-hidden">
           <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
             这里还没想好放什么
           </div>
         </div>
       </div>
       <div
-          class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
+          class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full bg-old-neutral-200 dark:bg-old-neutral-800 p-5">
         <URadioGroup
             v-model="currentChoice" orientation="horizontal" variant="table" :items="choiceItems as any[]" size="sm"
             class="mb-5"/>
diff --git a/pages/index/article/[articleID]/components/ArticleHeader.vue b/pages/index/article/[articleID]/components/ArticleHeader.vue
index f57f9f1..4a3aaeb 100644
--- a/pages/index/article/[articleID]/components/ArticleHeader.vue
+++ b/pages/index/article/[articleID]/components/ArticleHeader.vue
@@ -51,7 +51,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 pb-0 light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-colors duration-500">
+  <div class="p-6 pb-0 light:bg-old-neutral-200 dark:bg-old-neutral-800">
     <UCollapsible v-model:open="open" :unmount-on-hide="false" class="flex flex-col gap-2 w-full">
       <div class="text-4xl flex justify-between items-center w-full">
         <div class="mb-0 pb-0">
diff --git a/pages/index/article/[articleID]/index.vue b/pages/index/article/[articleID]/index.vue
index 2717e3d..3754441 100644
--- a/pages/index/article/[articleID]/index.vue
+++ b/pages/index/article/[articleID]/index.vue
@@ -11,15 +11,15 @@ const editorId = 'article-previewer';
 <template>
   <div>
     <div class="table w-full mt-6 mb-6 table-fixed">
-      <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)] transition-colors duration-500">
-        <div class="relative duration-500 transition-all xl:w-80 w-0 mr-2/3 overflow-hidden">
-          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5 transition-colors duration-500">
+      <div class="sticky top-16 float-left bg-old-neutral-200 dark:bg-old-neutral-800 max-h-[calc(100vh-4rem)]">
+        <div class="relative duration-500 transition-[width] xl:w-80 w-0 mr-2/3 overflow-hidden">
+          <div class="w-80 top-0 left-0 text-gray-800 dark:text-white p-5">
             <div class="text-3xl mb-2">目录</div>
             <MdCatalog :editor-id="editorId" :scroll-element="'html'" class=""/>
           </div>
         </div>
       </div>
-      <div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full max-w-full">
+      <div class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full max-w-full">
         <ArticleHeader v-if="article" class="w-full" :meta-data="toMetaDataType(article)"/>
 <!--        <ArticleCard v-if="article" class=" w-full" :article="toArticleMetaDataType(article)"/>-->
         <ReadonlyMdEditor :editor-id="editorId" :markdown="article?.rawbody" class="p-5 max-w-full"/>
diff --git a/pages/index/components/ArticleCard.vue b/pages/index/components/ArticleCard.vue
index b635b86..1787694 100644
--- a/pages/index/components/ArticleCard.vue
+++ b/pages/index/components/ArticleCard.vue
@@ -52,7 +52,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64 transition-all duration-500">
+  <div class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64">
     <div class="text-4xl">
       {{ metaData?.title }}
     </div>
@@ -105,7 +105,7 @@ onMounted(() => {
               :tech-stack-icon-names="metaData?.tech_stack_icon_names"
               :tech-stack-theme-colors="metaData?.tech_stack_theme_colors"
               :tech-stack-percent="metaData?.tech_stack_percent"
-              class="lg:w-64 w-0 transition-all duration-500"
+              class="lg:w-64 w-0 transition-[width] duration-500"
           />
       </div>
       <div v-else class="min-w-64"/>
diff --git a/pages/index/components/SimpleCard.vue b/pages/index/components/SimpleCard.vue
index eb8c5dd..e2f0224 100644
--- a/pages/index/components/SimpleCard.vue
+++ b/pages/index/components/SimpleCard.vue
@@ -2,7 +2,6 @@
 
 import { DataAnomaly, defaultMetaData } from '~/types/PostMetaData';
 import type { PostMetaData } from '~/types/PostMetaData';
-import useColorModeStore from '~/stores/colorModeStore';
 
 const props = withDefaults(defineProps<{
   metaData?: PostMetaData;
@@ -54,55 +53,25 @@ const safeEditorId = computed(() => {
   return `rambling_${encoded}`;
 });
 
-const showLightShadow = ref(false);
-const showDarkShadow = ref(false);
+const showShadow = ref(true);
 
 function reverseCollapsed() {
   if (collapsed.value) {
     collapsed.value = false;
     return;
   }
-  const showLight = showLightShadow.value;
-  const showDark = showDarkShadow.value;
-  showLightShadow.value = false;
-  showDarkShadow.value = false;
   collapsed.value = true;
+  showShadow.value = false;
   setTimeout(() => {
-    showLightShadow.value = showLight;
-    showDarkShadow.value = showDark;
+    showShadow.value = true;
   }, 500);
 }
 
-const colorModeStore = useColorModeStore();
-let colorModeCallBackKey = '';
-onMounted(() => {
-  if (colorModeStore.colorMode === 'light') {
-    showLightShadow.value = true;
-  } else {
-    showDarkShadow.value = true;
-  }
-  colorModeCallBackKey = colorModeStore.registerCallBack(() => {
-    if (colorModeStore.colorMode === 'light') {
-      setTimeout(() => {
-        showLightShadow.value = true;
-      }, 500);
-      showDarkShadow.value = false;
-    } else {
-      showLightShadow.value = false;
-      setTimeout(() => {
-        showDarkShadow.value = true;
-      }, 500);
-    }
-  });
-});
-onUnmounted(() => {
-  colorModeStore.unregisterCallBack(colorModeCallBackKey);
-});
 </script>
 
 <template>
   <div
-      class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64 transition-all duration-500"
+      class="p-5 light:bg-old-neutral-200 dark:bg-old-neutral-800 min-h-64"
       @click="reverseCollapsed">
     <div class="text-4xl">
       {{ (typeChinese.get(metaData?.type) || 'unknown Type') + '：' }}{{ props.metaData.title }}
@@ -146,18 +115,14 @@ onUnmounted(() => {
 
     </div>
     <div
-        class="relative flex mt-2 justify-between overflow-hidden transition-all duration-300 ease-in-out min-h-[8.5rem]"
+        class="relative flex mt-2 justify-between overflow-hidden duration-300 ease-in-out min-h-[8.5rem]"
         :class="{'max-h-[8.5rem]' : collapsed, 'max-h-[100vh]':!collapsed}">
       <ReadonlyMdEditor
           v-if="rawbody" :editor-id="safeEditorId" :markdown="rawbody!"
-          class="transition-all duration-500 w-full"/>
+          class="w-full"/>
       <div
-          class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-200 to-transparent pointer-events-none transition-opacity duration-300"
-          :class="collapsed&&showLightShadow?'opacity-100':'opacity-0'"
-      />
-      <div
-          class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-800  to-transparent pointer-events-none transition-opacity duration-300"
-          :class="collapsed&&showDarkShadow?'opacity-100':'opacity-0'"
+          class="absolute bottom-0 left-0 right-0 h-14 bg-gradient-to-t from-old-neutral-200 dark:from-old-neutral-800  to-transparent pointer-events-none transition-opacity duration-300"
+          :class="collapsed && showShadow?'opacity-100':'opacity-0'"
       />
     </div>
     <hr/>
diff --git a/pages/index/components/ThemeChange.vue b/pages/index/components/ThemeChange.vue
new file mode 100644
index 0000000..10f2e2e
--- /dev/null
+++ b/pages/index/components/ThemeChange.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import useColorModeStore from '~/stores/colorModeStore';
+
+const colorModeStore = useColorModeStore();
+
+function revealToggle(e?: MouseEvent) {
+  if (typeof document === 'undefined' || !e || !('startViewTransition' in document)) {
+    // SSR 或无事件时直接切换或不支持时直接切换
+    colorModeStore.toggleColorMode();
+    return;
+  }
+
+  const transition = document.startViewTransition(() => {
+    colorModeStore.toggleColorMode();
+  });
+  transition.ready.then(() => {
+    // 获取鼠标的坐标
+    const { clientX, clientY } = e!;
+
+    // 计算最大半径
+    const radius = Math.hypot(
+      Math.max(clientX, innerWidth - clientX),
+      Math.max(clientY, innerHeight - clientY),
+    );
+
+    // 圆形动画扩散开始
+    document.documentElement.animate(
+      {
+        clipPath: [
+          `circle(0% at ${clientX}px ${clientY}px)`,
+          `circle(${radius}px at ${clientX}px ${clientY}px)`,
+        ],
+      },
+      // 设置时间，已经目标伪元素
+      {
+        duration: 500,
+        pseudoElement: '::view-transition-new(root)',
+      },
+    );
+  });
+}
+
+</script>
+
+<template>
+    <Transition
+        mode="out-in"
+        enter-active-class="transition-opacity duration-300 ease-in-out"
+        enter-from-class="opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="transition-opacity duration-300 ease-in-out"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+    >
+      <Icon
+          v-if="colorModeStore.colorMode === 'dark'"
+          key="dark"
+          name="material-symbols:dark-mode"
+          class="text-2xl cursor-pointer mr-5"
+          @click="revealToggle($event)"
+      />
+      <Icon
+          v-else
+          key="light"
+          name="material-symbols:clear-day-rounded"
+          class="text-2xl cursor-pointer mr-5"
+          @click="revealToggle($event)"
+      />
+    </Transition>
+</template>
+
+<style>
+::view-transition-new(root),
+::view-transition-old(root) {
+  animation: none;
+}
+
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index b6cedce..5532eb6 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -33,7 +33,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
   <div>
     <div class="table w-full mt-6 table-fixed">
       <div class="sticky top-16 float-left max-h-[calc(100vh-4rem)]">
-        <div class="relative duration-500 transition-all xl:w-80 w-0 overflow-hidden">
+        <div class="relative duration-500 transition-[width] xl:w-80 w-0 overflow-hidden">
           <div class="w-80 top-0 left-0 text-gray-800 dark:text-white">
             <ArticleDescriptionCards
                 v-if="postsMetaData"
@@ -42,7 +42,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
           </div>
         </div>
       </div>
-      <div class="transition-all duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
+      <div class="transition-[width] duration-500 float-right xl:w-[calc(100%-20rem-40px)] w-full">
         <!--        <ArticleCard class="mb-6 w-full transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600"/>-->
         <div
             v-for="post in postsMetaData" :key="post.id"
@@ -64,7 +64,7 @@ function filterRuleChange(rule: (data: PostMetaData) => boolean) {
         </div>
         <div v-if="postsMetaData.length === 0" class="w-full">
           <div
-              class="w-full light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-all duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
+              class="w-full light:bg-old-neutral-200 dark:bg-old-neutral-800 transition-shadow duration-300 shadow-lg hover:shadow-old-neutral-600 hover:cursor-pointer">
               <div class="pt-5 text-center text-2xl">
                 没有找到符合条件的文章
               </div>
diff --git a/public/79d52228c770808810a310115567e6790380823a.png b/public/79d52228c770808810a310115567e6790380823a.png
deleted file mode 100644
index 4f0fefd..0000000
Binary files a/public/79d52228c770808810a310115567e6790380823a.png and /dev/null differ
diff --git a/public/79d52228c770808810a310115567e6790380823a.webp b/public/79d52228c770808810a310115567e6790380823a.webp
new file mode 100644
index 0000000..adc0100
Binary files /dev/null and b/public/79d52228c770808810a310115567e6790380823a.webp differ
diff --git a/public/anime-8788959.jpg b/public/anime-8788959.jpg
deleted file mode 100644
index 51fc42e..0000000
Binary files a/public/anime-8788959.jpg and /dev/null differ
diff --git a/public/anime-8788959.webp b/public/anime-8788959.webp
new file mode 100644
index 0000000..229873d
Binary files /dev/null and b/public/anime-8788959.webp differ