使用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;
}