gd2.css 1.1 KB

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