diff --git a/css/index.css b/css/index.css index c4679a9..62d4e5c 100644 --- a/css/index.css +++ b/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; } } diff --git a/js/index.js b/js/index.js index a9776b7..a0d57a4 100644 --- a/js/index.js +++ b/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(); } })();