/* 轮播容器:限定可视区域,每页显示3张左右 */ .carousel-db { width: 100%; height: 650px; overflow: hidden; position: relative; cursor: pointer; } /* 图片轨道:横向排列,用于滚动 */ .carousel-track-db { display: flex; align-items: center; height: 63vh; gap: 20px; height: 100%; position: relative; } /* 图片项:基础样式,固定宽高 */ .carousel-item-db { width: 850px; height: 500px; flex-shrink: 0; align-self: center; border-radius: 12px; overflow: hidden; transition: all 2s ease; /* 放大/还原过渡 */ z-index: 1; } /* 图片样式:覆盖容器,保持比例 */ .carousel-item-db img { width: 100%; height: 100%; object-fit: cover; } /* 居中激活样式:放大+阴影+置顶,突出显示 */ .carousel-item-db.active-db { transform: scale(1.2); /* 放大倍数,可自定义 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* 立体阴影突出 */ z-index: 10; /* 层级置顶,不被其他图片遮挡 */ }