css 图片向上滚动 |css border 不起作用

// HTML结构
<div class="banner">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
// 更多图片
<img src="img/n.jpg">
</div>
// CSS代码
.banner {
height: 300px; // 轮播图高度
overflow: hidden; // 超出轮播图高度部分隐藏
position: relative;
}
.banner img {
height: 300px; // 图片高度等于轮播图高度
position: absolute;
top: 0; // 图片定位在轮播图顶部
left: 0; // 图片定位在轮播图左侧
transition: all 1s ease; // 图片过渡效果，1s过渡时间，缓动效果
animation: scroll-up 5s infinite; // 图片向上无限滚动，5s一次，无限循环
}
// 动画关键帧
@keyframes scroll-up {
0% {
transform: translateY(0); // 图片初始位置
}
100% {
transform: translateY(-300px); // 图片向上移动一个轮播图的高度
}
}

上述代码中，大家通过CSS将多个图片按顺序摆放在一个宽度、高度固定的容器内，利用position定位将其定位在容器的顶部和左侧，然后通过CSS3关键帧动画实现图片向上无限滚动的效果。

其中，由于图片按序号从上往下摆放，仅显示一张图片，其余图片超出轮播图部分被隐藏。当第一张图片向上滚动一个轮播图高度时，它将从轮播图的下方重新进入，实现轮播效果。

通过这种方法实现的图片向上滚动效果能够满足大多数网页的需求，同时代码也相对简单，可读性较好。