导航栏与首页动画优化

src/pages/index.astro

@@ -145,6 +145,7 @@ try {
 
   .slide {
     scroll-snap-align: start;
+    scroll-snap-stop: always;
     height: 100dvh;
     display: flex;
     align-items: center;
@@ -201,6 +202,24 @@ try {
     }
   }
 
+  @property --avatar-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-hover-scalar {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  @property --avatar-rotation {
+    syntax: '<angle>';
+    inherits: true;
+    initial-value: 0deg;
+  }
+
   /* 自我介绍部分 */
   .self-introduction {
     display: flex;
@@ -217,16 +236,32 @@ try {
     & > .avatar {
       margin: 0;
       border-radius: 50%;
+
       --final-width: clamp(160px, 30vw, 240px);
-      transition: all cubic-bezier(0.4, 1, 0.4, 1) 1.2s;
-      transform: rotate(10deg);
+      --avatar-scalar: 0;
+      --avatar-hover-scalar: 1;
+      --avatar-rotation: 20deg;
+      transition:
+        --avatar-rotation cubic-bezier(0.2, 1, 0.4, 1) 1.8s,
+        --avatar-scalar cubic-bezier(0.2, 2, 0.3, 0.8) 1.2s,
+        --avatar-hover-scalar cubic-bezier(0.2, 3, 0.4, 0.6) 0.6s,
+        width cubic-bezier(0.4, 1, 0.4, 1) 0.9s;
+
+      transform: rotate(var(--avatar-rotation)) scale(var(--avatar-scalar))
+        scale(var(--avatar-hover-scalar));
       aspect-ratio: 1 / 1;
       overflow: hidden;
       width: 0;
 
       section.slide.slide-visible & {
+        --avatar-scalar: 1;
+        --avatar-rotation: 0deg;
         width: var(--final-width);
-        transform: rotate(0);
+      }
+
+      &:hover,
+      &:focus {
+        --avatar-hover-scalar: 1.05;
       }
     }
 
@@ -288,7 +323,8 @@ try {
     }
   }
 
-  section:has(.thsx:hover) .motto > p {
+  section:has(.thsx:hover) .motto > p,
+  section:has(.thsx:focus) .motto > p {
     &:nth-child(1)::before {
       transition-delay: 0;
     }