加入留言板博客按钮

static/css/main.css

@@ -23,6 +23,7 @@ body {
 }
 
 .letter-container {
+    /* max-width: 65%; */
     max-width: 850px;
     margin: 0 auto;
     background: white;
@@ -81,10 +82,26 @@ body {
 /* 内容区域 */
 .tab-content {
     display: none;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
+                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .tab-content.active {
     display: block;
+    animation: tabFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes tabFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 /* 信纸纹理效果 */
@@ -181,6 +198,15 @@ body {
     border: 1px solid #eee;
     border-radius: 4px;
     background-color: #fafafa;
+    cursor: pointer;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
+                box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tool-item:hover,
+.game-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 }
 
 .tool-name,
@@ -248,6 +274,7 @@ body {
 /* 底部版权信息 - 在信纸外部 */
 #footer-wrap {
     max-width: 850px;
+    /* max-width: 65%; */
     margin: 0 auto 20px auto;
     text-align: center;
     padding: 20px;