| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- /* 轮播容器:限定可视区域,每页显示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; /* 层级置顶,不被其他图片遮挡 */
- }
|