使用CSS实现图片循环滚动

当图片是一张长图时，保持其宽高比，并完整展示图片内容无缝循环滚动。当前案例是水平滚动，当然也是可以实现垂直滚动，原理都是一样的

演示

https://codepen.io/PONJS/pen/rNOmQoX

HTML结构

<div class="roll">
    <div class="wrap">
        <!-- 至少两张图片才能无缝循环 -->
        <img class="item" src="image.png">
        <img class="item" src="image.png">
    </div>
</div>

CSS样式

@keyframes roll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);    /* 左移距离为图片宽度 */
    }
}
.roll {
    width: 100%;
    height: 240px;
    overflow: hidden;    /* 设定容器宽高 超出部分隐藏 */
}
.wrap {
    height: 100%;
    display: flex;    /* 使其图片水平排列 */
}
.item {
    height: 100%;
    object-fit: cover;    /* 保持其宽高比 同时填充元素的整个容器 */
    animation: 30s roll linear infinite normal;
}

本文链接：