fix(ui): enhance header and post styles with new animations and layout adjustments

src/styles/header.scss

@@ -158,7 +158,7 @@
 
       &.open {
         display: block;
-        animation: terminal-frame 0.2s ease-out;
+        animation: terminal-frame-reveal 0.3s ease-out forwards;
 
         // 逐行渲染效果 - 为每个子项添加延迟动画
         li {
@@ -182,17 +182,14 @@
     padding: 0;
   }
 
-  // 菜单框架渲染动画 - 模拟终端窗口从上到下打开
-  @keyframes terminal-frame {
+  // 菜单框架渲染动画 - 从上到下逐层渲染边框和内容
+  @keyframes terminal-frame-reveal {
     0% {
-      max-height: 0;
-      opacity: 0;
-    }
-    50% {
+      clip-path: inset(-10px -10px calc(100% + 10px) -10px);
       opacity: 1;
     }
     100% {
-      max-height: 800px;
+      clip-path: inset(-10px -10px -10px -10px);
       opacity: 1;
     }
   }
@@ -201,7 +198,7 @@
   @keyframes terminal-line {
     0% {
       opacity: 0;
-      transform: translateX(-10px);
+      transform: translateX(-2px);
     }
     50% {
       opacity: 0.5;

src/styles/post.scss

@@ -38,6 +38,8 @@
   }
 
   %meta {
+    display: flex;
+    align-items: center;
     font-size: 1rem;
     margin-bottom: 10px;
     color: var(--brightBlue);
@@ -53,6 +55,30 @@
     display: inline;
   }
 
+  &-separator {
+    position: relative;
+    top: 1px;
+    display: inline-grid;
+    grid-template-columns: repeat(2, 3px);
+    grid-template-rows: repeat(2, 3px);
+    gap: 2px;
+    margin: 0 6px;
+
+    span {
+      width: 2px;
+      height: 2px;
+      background-color: var(--brightBlue);
+      border-radius: 50%;
+      opacity: 0.2;
+    }
+
+    // 每个点使用不同动画和时长，形成随机效果
+    span:nth-child(1) { animation: dot-blink-1 2.8s ease-in-out infinite; }
+    span:nth-child(2) { animation: dot-blink-2 2.2s ease-in-out infinite 0.4s; }
+    span:nth-child(3) { animation: dot-blink-3 3.4s ease-in-out infinite 1s; }
+    span:nth-child(4) { animation: dot-blink-4 2.6s ease-in-out infinite 0.2s; }
+  }
+
   &-title {
     --border: 3px dotted var(--blue);
 
@@ -172,4 +198,34 @@
 .comment-wrap {
   position: relative;
   z-index: 2;
-}
+}
+
+// 4个不同的随机动画模式
+@keyframes dot-blink-1 {
+  0%, 100% { opacity: 0.2; }
+  25% { opacity: 1; }
+  50% { opacity: 0.3; }
+  75% { opacity: 0.8; }
+}
+
+@keyframes dot-blink-2 {
+  0%, 100% { opacity: 0.3; }
+  30% { opacity: 0.9; }
+  60% { opacity: 0.2; }
+  85% { opacity: 0.7; }
+}
+
+@keyframes dot-blink-3 {
+  0%, 100% { opacity: 0.2; }
+  20% { opacity: 0.6; }
+  45% { opacity: 1; }
+  70% { opacity: 0.4; }
+}
+
+@keyframes dot-blink-4 {
+  0%, 100% { opacity: 0.4; }
+  15% { opacity: 0.2; }
+  40% { opacity: 0.8; }
+  65% { opacity: 1; }
+  90% { opacity: 0.3; }
+}