/* 轮播容器:控制可视区域,只显示3张 */ .carousel-db { width: 100%; height: 650px; /* max-width: 1000px; */ overflow: hidden; position: relative; /* 两侧渐变遮罩,更美观 */ mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent); } /* 滚动轨道:所有图片排成一行 */ .carousel-track-db { display: flex; align-items: center; height: 63vh; gap: 20px; /* 图片间距 */ width: max-content; animation: scroll 50s linear infinite; /* 无级滚动 */ } /* 核心:无缝滚动动画 */ @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* 图片项:每页3张,控制宽度 */ .carousel-item-db { width: 500px; /* 单张图片宽度 */ height: 500px; /* 图片高度 */ flex-shrink: 0; } /* 图片样式 */ .carousel-item-db img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* 鼠标悬停暂停播放 */ .carousel-db:hover .carousel-track-db { animation-play-state: paused; } .carousel-db .carousel-track-db .carousel-item-db img:hover { transform: scale(1.2); }