.slider-container { position: relative; width: 100vw; height:calc(100vh - 250px); overflow: hidden; } .slides-wrapper { position: relative; width: 100%; height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; z-index: 1; } .slide.active { opacity: 1; z-index: 2; } .slide-content { display: flex; width: 100%; max-width: 1400px; gap: 60px; align-items: center; } .text-content { flex: 1; opacity: 0; transform: translatey(50px); transition: all 0.8s ease 0.3s; } .slide.active .text-content { opacity: 1; transform: translatey(0); } .text-content h2 { font-size: 3rem; margin-bottom: 20px; color: #053e83;font-weight:500; line-height: 1.2; } .text-content p { font-size: 1.3rem; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; } .btn { display: inline-block; padding: 14px 32px; background: #3498db; color: white; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .btn:hover { background: #2980b9; transform: translatey(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } .images-container { flex: 1; display: flex; justify-content: center; align-items: center; } /* 四格布局 */ .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 20px; width: 100%; max-width: 540px; } .grid-item { position: relative; border-radius: 12px; overflow: hidden; opacity: 0; transform: translatey(30px); transition: all 0.6s ease; } .grid-4 .grid-item { width: 260px; height: 250px; } .slide.active .grid-4 .grid-item:nth-child(1) { opacity: 1; transform: translatey(0); transition-delay: 0.5s; } .slide.active .grid-4 .grid-item:nth-child(2) { opacity: 1; transform: translatey(0); transition-delay: 0.7s; } .slide.active .grid-4 .grid-item:nth-child(3) { opacity: 1; transform: translatey(0); transition-delay: 0.9s; } .slide.active .grid-4 .grid-item:nth-child(4) { opacity: 1; transform: translatey(0); transition-delay: 1.1s; } /* 两图交错布局 */ .grid-2-staggered { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 540px; } .grid-2-staggered .grid-item { width: 360px; height: 320px; } .grid-2-staggered .grid-item:nth-child(1) { align-self: flex-start; } .grid-2-staggered .grid-item:nth-child(2) { align-self: flex-end; } .slide.active .grid-2-staggered .grid-item:nth-child(1) { opacity: 1; transform: translatey(0); transition-delay: 0.5s; } .slide.active .grid-2-staggered .grid-item:nth-child(2) { opacity: 1; transform: translatey(0); transition-delay: 0.8s; } /* 单图布局 */ .single-image .grid-item { width: 500px; height: 380px; } .slide.active .single-image .grid-item { opacity: 1; transform: translatey(0); transition-delay: 0.5s; } /* 蜂窝布局 (2-3-2) - 紧密圆形排列 */ .honeycomb-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0; /* 无间隙,实现紧密排列 */ width: 400px; /* 调整宽度以适应紧密排列 */ height: 450px; /* 调整高度以适应紧密排列 */ margin: 0 auto; position: relative; justify-items: center; align-items: center; } .honeycomb-grid .grid-item { width: 150px; height: 170px; position: relative; clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25% ); border: 2px solid white; overflow: hidden; background: transparent; box-sizing: border-box; opacity: 0; transform: translatey(20px); transition: all 0.5s ease; overflow:hidden; text-align:center; background-color:#ffffff; } /* 紧密圆形排列 - 边框紧贴 */ .honeycomb-grid .grid-item:nth-child(1) { /* 第一行左侧 - 居中靠左 */ grid-column: 2; grid-row: 1; margin-left:-150px; /* 负边距使边框紧贴 */ } .honeycomb-grid .grid-item:nth-child(2) { /* 第一行右侧 - 居中靠右 */ grid-column: 2; grid-row: 1; margin-left:165px; /* 负边距使边框紧贴 */ } .honeycomb-grid .grid-item:nth-child(3) { /* 第二行左侧 */ grid-column: 1; grid-row: 2; margin-top: -40px; /* 交错效果 */ margin-right:-80px; } .honeycomb-grid .grid-item:nth-child(4) { /* 第二行中间 */ grid-column: 2; grid-row: 2; margin-top: -40px; /* 交错效果 */ margin-left: 10px; margin-right: 0px; } .honeycomb-grid .grid-item:nth-child(5) { /* 第二行右侧 */ grid-column: 3; grid-row: 2; margin-top: -40px; /* 交错效果 */ margin-left:-70px; } .honeycomb-grid .grid-item:nth-child(6) { /* 第三行左侧 - 居中靠左 */ grid-column: 2; grid-row: 3; margin-top: -80px; /* 与第二行重叠形成蜂窝 */ margin-left:-150px } .honeycomb-grid .grid-item:nth-child(7) { /* 第三行右侧 - 居中靠右 */ grid-column: 3; grid-row: 3; margin-top: -80px; /* 与第二行重叠形成蜂窝 */ margin-left:-225px; } /* 确保图片适应六边形 */ .honeycomb-grid .grid-item img { width: 80%; height: 80%; margin:0 auto; object-fit: cover; display: block; } /* 蜂窝布局动画延迟 */ .slide.active .honeycomb-grid .grid-item:nth-child(1) { opacity: 1; transform: translatey(0); transition-delay: 0.5s; } .slide.active .honeycomb-grid .grid-item:nth-child(2) { opacity: 1; transform: translatey(0); transition-delay: 0.6s; } .slide.active .honeycomb-grid .grid-item:nth-child(3) { opacity: 1; transform: translatey(0); transition-delay: 0.7s; } .slide.active .honeycomb-grid .grid-item:nth-child(4) { opacity: 1; transform: translatey(0); transition-delay: 0.8s; } .slide.active .honeycomb-grid .grid-item:nth-child(5) { opacity: 1; transform: translatey(0); transition-delay: 0.9s; } .slide.active .honeycomb-grid .grid-item:nth-child(6) { opacity: 1; transform: translatey(0); transition-delay: 1.0s; } .slide.active .honeycomb-grid .grid-item:nth-child(7) { opacity: 1; transform: translatey(0); transition-delay: 1.1s; } /* 容器包装确保整体居中 */ .honeycomb-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; } .grid-item{align-self: end;} .grid-item img { max-width:100%; max-height:100%; object-fit: cover; display: block; cursor: pointer; object-fit: cover; transition: transform 0.5s ease; } .grid-item:hover img { transform: scale(1.01); } .slide-controls { position: absolute; bottom: 40px; left: 50%; transform: translatex(-50%); display: flex; gap: 15px; z-index: 10; } .slide-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.3s ease; } .slide-dot.active { background: white; transform: scale(1.2); } .nav-btn { position: absolute; top: 50%; transform: translatey(-50%); background: rgba(255,255,255,0.2); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; backdrop-filter: blur(5px); } .nav-btn:hover { background: rgba(255,255,255,0.3); transform: translatey(-50%) scale(1.1); } .prev-btn { left: 30px; background: rgba(0,0,0,0.05); } .next-btn { right: 30px; background: rgba(0,0,0,0.05); } .slide-counter { position: absolute; top: 40px; right: 40px; color: white; font-size: 1.2rem; z-index: 10; background: rgba(0,0,0,0.3); padding: 8px 16px; border-radius: 20px; backdrop-filter: blur(5px); } /* 响应式设计 */ @media (max-width: 1400px) { .slide-content { max-width: 1200px; } } @media (max-width: 1200px) { .slide-content { max-width: 1000px; gap: 40px; } .text-content h2 { font-size: 2.8rem; } } @media (max-width: 992px) { .slide-content { flex-direction: column; text-align: center; gap: 40px; } .text-content h2 { font-size: 2.5rem; } .grid-4, .grid-2-staggered, .single-image, .honeycomb-grid { max-width: 100%; } } @media (max-width: 768px) { .text-content h2 { font-size: 2rem; } .text-content p { font-size: 1rem; } .grid-4 .grid-item, .grid-2-staggered .grid-item { width: 200px; height: 190px; } .single-image .grid-item { width: 340px; height: 300px; } .honeycomb-grid .grid-item { height: 140px; } .nav-btn { width: 40px; height: 40px; font-size: 1rem; } .prev-btn { left: 15px; } .next-btn { right: 15px; } } @media (max-width: 576px) { .slide { padding: 20px; } .text-content h2 { font-size: 1.8rem; } .grid-4, .grid-2-staggered { grid-template-columns: 1fr; max-width: 300px; } .grid-4 .grid-item, .grid-2-staggered .grid-item { width: 100%; height: 200px; } .single-image .grid-item { width: 100%; max-width: 300px; height: 250px; } .honeycomb-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); max-width: 400px; } .honeycomb-grid .grid-item { height: 120px; } /* 调整蜂窝布局在小屏幕上的排列 */ .honeycomb-grid .grid-item:nth-child(1) { grid-column: 1; grid-row: 1; } .honeycomb-grid .grid-item:nth-child(2) { grid-column: 2; grid-row: 1; } .honeycomb-grid .grid-item:nth-child(3) { grid-column: 1; grid-row: 2; } .honeycomb-grid .grid-item:nth-child(4) { grid-column: 2; grid-row: 2; } .honeycomb-grid .grid-item:nth-child(5) { grid-column: 1; grid-row: 3; } .honeycomb-grid .grid-item:nth-child(6) { grid-column: 2; grid-row: 3; } .honeycomb-grid .grid-item:nth-child(7) { grid-column: 1; grid-row: 4; } .slide-controls { bottom: 20px; } .slide-counter { top: 20px; right: 20px; } }