fixed 图片懒加载bug

themes/Ying/assets/css/main.css

@@ -689,36 +689,49 @@ ul {
     }
     .header-info {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: flex-start; /* Changed to flex-start to align with text */
+        flex-direction: column; /* Stack vertically */
+        align-content: flex-end; /* Push to bottom */
+        justify-content: flex-end; /* Push to bottom */
+        align-items: center; /* Center align horizontally */
         margin-left: 10px;
         height: 80px;
-        width: calc(100vw - 140px); /* Ensure container takes available space */
+        width: calc(100vw - 140px);
+        padding-bottom: 0px; 
     }
     
     .header-social {
         display: flex;
+        align-items: center; 
         flex-wrap: nowrap;
-        gap: 10px;
-        margin-bottom: 5px;
-        width: 100%; /* Take full width to allow centering */
-        justify-content: center; /* Center icons horizontally */
+        gap: 12px; /* Increased gap for better spacing */
+        margin-bottom: 2px; /* Add small space between rows */
+        margin-right: 0;
+        width: 100%; 
+        justify-content: center; /* Center align icons */
+        height: 24px; 
+    }
+
+    .header-social a {
+        margin: 0 !important; 
+        display: flex;
+        align-items: center;
     }
 
     .header-bio {
         display: block;
         font-size: 0.85rem;
+        line-height: 24px; 
+        min-height: 24px; 
         margin: 0;
         opacity: 0.8;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        width: 100%; /* Take full width */
-        text-align: center; /* Center the text */
+        width: 100%; /* Full width */
+        text-align: center; /* Center align text */
         
         /* Typewriter Effect Cursor */
-        border-right: 2px solid transparent; /* Hidden by default, toggled by JS if needed, or use ::after */
+        border-right: 2px solid transparent; 
     }
     
     /* Cursor Animation Class */
@@ -743,7 +756,7 @@ ul {
     margin-bottom: 0;
     text-align: center;
     /* Reset gap for social icons as they rely on margin */
-    gap: 0; 
+    gap: 2; 
 }
 
 .header-social a {
@@ -4687,6 +4700,21 @@ html[data-theme="light"] .atk-loading-spinner svg circle {
     border-color: #333;
 }
 
+/* Lazy Load Animation */
+.lazyload {
+    opacity: 0;
+    transform: translateY(30px); /* 稍微增加位移距离，增强上浮感 */
+    filter: blur(5px); /* 减少模糊，避免过于影响性能 */
+    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.8s ease-out; /* 使用 ease-out 和自定义贝塞尔曲线，模拟自然惯性 */
+    will-change: opacity, transform; /* 移除 filter 的 will-change 以节省内存 */
+}
+
+.lazyload.lazy-loaded {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+}
+
 [data-theme="dark"] .ai-comment-card .atk-content p {
     color: var(--text-content-dark-color);
 }