CSS：跑马灯

<div class="swiper-container"><div class="swiper-wrapper"><!-- 第一组 --><div class="item" v-for="item in cardList" :key="'first-'+item.id"><img :src="item.image" alt="" class="mb-15"></div><!-- 第二组（用于无缝衔接） --><div class="item" v-for="item in cardList" :key="'second-'+item.id"><img :src="item.image" alt="" class="mb-15"></div></div>
</div>

.swiper-container {width: 100%;overflow: hidden;padding: 0 .4rem;position: relative;
}.swiper-wrapper {display: flex;animation: scroll 30s linear infinite;width: fit-content; // 确保容器宽度适应内容
}.item {flex-shrink: 0;width: 2.2rem;height: 2.84rem;background: #FFFFFF;border-radius: .2rem;border: .1rem solid #B0B0AC;margin-right: .3rem;img{width: 2rem;height: 2rem;}
}
@keyframes scroll {0% {transform: translateX(0);}100% {transform: translateX(calc(-50%)); // 移动一半距离，确保无缝衔接}
}