实现卡片堆叠效果，后面卡片可见部分轮廓

- 当前卡片在最前面，完全显示
- 后面3张卡片依次堆叠，露出顶部边缘
- 使用 scale 和 translateY 制造深度感
- 堆叠卡片透明度和亮度递减，形成视觉层次
- 切换时当前卡片滑出，新卡片从右侧滑入最前面
- 其他卡片自动更新堆叠位置
- 添加 perspective 增强3D效果
- 容器底部增加 padding 防止堆叠卡片被裁剪

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

css/index.css

@@ -2696,46 +2696,76 @@ html {
   display: none;
 }
 
-/* 下层：幻灯片容器 */
+/* 下层：幻灯片容器 - 支持卡片堆叠视觉 */
 .solution-slider {
   position: relative;
   min-height: 450px;
-  overflow: hidden;
+  perspective: 1000px;
+  padding-bottom: 30px;
 }
 
-/* 单个幻灯片 - 堆叠效果 */
+/* 单个幻灯片 - 堆叠卡片效果 */
 .solution-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
-  transform: translateX(-100%);
+  transform: translateX(-100%) scale(0.95);
   transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
   z-index: 1;
 }
 
+/* 激活的幻灯片 */
 .solution-slide.active {
   position: relative;
   opacity: 1;
-  transform: translateX(0);
+  transform: translateX(0) translateY(0) scale(1);
   pointer-events: auto;
   z-index: 10;
 }
 
+/* 后面的卡片 - 显示部分轮廓 */
+.solution-slide.stack-1 {
+  position: absolute;
+  opacity: 0.6;
+  transform: translateX(0) translateY(10px) scale(0.98);
+  pointer-events: none;
+  z-index: 9;
+  filter: brightness(0.9);
+}
+
+.solution-slide.stack-2 {
+  position: absolute;
+  opacity: 0.4;
+  transform: translateX(0) translateY(20px) scale(0.96);
+  pointer-events: none;
+  z-index: 8;
+  filter: brightness(0.8);
+}
+
+.solution-slide.stack-3 {
+  position: absolute;
+  opacity: 0.2;
+  transform: translateX(0) translateY(30px) scale(0.94);
+  pointer-events: none;
+  z-index: 7;
+  filter: brightness(0.7);
+}
+
 /* 即将离开的幻灯片 */
 .solution-slide.leaving {
   position: absolute;
   opacity: 1;
-  transform: translateX(0);
-  z-index: 5;
+  transform: translateX(0) scale(1);
+  z-index: 11;
   animation: slideOutLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 @keyframes slideOutLeft {
   to {
-    transform: translateX(-100%);
+    transform: translateX(-120%) scale(0.9);
     opacity: 0;
   }
 }
@@ -2744,14 +2774,14 @@ html {
 .solution-slide.entering {
   position: absolute;
   opacity: 0;
-  transform: translateX(100%);
-  z-index: 8;
+  transform: translateX(120%) scale(0.9);
+  z-index: 6;
   animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
 
 @keyframes slideInRight {
   to {
-    transform: translateX(0);
+    transform: translateX(0) scale(1);
     opacity: 1;
   }
 }

js/index.js

@@ -272,6 +272,32 @@ $(function () {
     let isAnimating = false;
     const autoPlayDuration = 3000; // 3秒自动切换
 
+    // 更新所有幻灯片的堆叠状态
+    function updateStackStates() {
+      $slides.each(function(index) {
+        const $slide = $(this);
+
+        // 移除所有堆叠类
+        $slide.removeClass('stack-1 stack-2 stack-3');
+
+        // 如果不是当前激活的，且不在动画中
+        if (index !== currentIndex && !$slide.hasClass('leaving') && !$slide.hasClass('entering')) {
+          // 计算相对于当前索引的位置
+          let offset = index - currentIndex;
+          if (offset < 0) offset += totalSlides;
+
+          // 只显示后面3张卡片的堆叠效果
+          if (offset === 1) {
+            $slide.addClass('stack-1');
+          } else if (offset === 2) {
+            $slide.addClass('stack-2');
+          } else if (offset === 3) {
+            $slide.addClass('stack-3');
+          }
+        }
+      });
+    }
+
     // 切换到指定幻灯片
     function switchSlide(index) {
       if (index === currentIndex || isAnimating) return;
@@ -281,8 +307,8 @@ $(function () {
       const $currentSlide = $slides.eq(currentIndex);
       const $nextSlide = $slides.eq(index);
 
-      // 移除所有动画类
-      $slides.removeClass('leaving entering');
+      // 移除所有动画类和堆叠类
+      $slides.removeClass('leaving entering stack-1 stack-2 stack-3');
 
       // 添加离开和进入动画
       $currentSlide.addClass('leaving');
@@ -301,6 +327,10 @@ $(function () {
         $nextSlide.addClass('active').removeClass('entering');
 
         currentIndex = index;
+
+        // 更新堆叠状态
+        updateStackStates();
+
         isAnimating = false;
       }, 800); // 与 CSS 动画时间一致
     }
@@ -344,6 +374,7 @@ $(function () {
 
     // 初始化
     if (totalSlides > 0) {
+      updateStackStates();
       startAutoPlay();
     }
   })();