gd.css 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. /* 轮播容器:控制可视区域,只显示3张 */
  2. .carousel-db {
  3. width: 100%;
  4. height: 650px;
  5. /* max-width: 1000px; */
  6. overflow: hidden;
  7. position: relative;
  8. /* 两侧渐变遮罩,更美观 */
  9. mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
  10. }
  11. /* 滚动轨道:所有图片排成一行 */
  12. .carousel-track-db {
  13. display: flex;
  14. align-items: center;
  15. height: 63vh;
  16. gap: 20px;
  17. /* 图片间距 */
  18. width: max-content;
  19. animation: scroll 50s linear infinite;
  20. /* 无级滚动 */
  21. }
  22. /* 核心:无缝滚动动画 */
  23. @keyframes scroll {
  24. 0% {
  25. transform: translateX(0);
  26. }
  27. 100% {
  28. transform: translateX(-50%);
  29. }
  30. }
  31. /* 图片项:每页3张,控制宽度 */
  32. .carousel-item-db {
  33. width: 500px;
  34. /* 单张图片宽度 */
  35. height: 500px;
  36. /* 图片高度 */
  37. flex-shrink: 0;
  38. }
  39. /* 图片样式 */
  40. .carousel-item-db img {
  41. width: 100%;
  42. height: 100%;
  43. object-fit: cover;
  44. border-radius: 12px;
  45. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  46. }
  47. /* 鼠标悬停暂停播放 */
  48. .carousel-db:hover .carousel-track-db {
  49. animation-play-state: paused;
  50. }
  51. .carousel-db .carousel-track-db .carousel-item-db img:hover {
  52. transform: scale(1.2);
  53. }