首先给外部一个盒子用来限制高度,再给个overflow:hidden;防止溢出,再给个position: relative;方便给内部盒子定位
<div class="rollBody">//底部盒子
<div class="scroll-list">//第一个
</div>
<div class="scroll-list1">//第二个
</div>
</div>
<style>
.rollBody{
overflow:hidden;
position: relative;
height:200px;
width: 200px;
}
.scroll-list {
/* 滚动动画 */
height: 100%;
background: rgb(175, 128, 128);
animation: scroll 15s linear infinite;
}
.scroll-list1 {
/* 滚动动画 */
background: rgb(100, 100, 100);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: scroll1 15s linear infinite;
}
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
@keyframes scroll1 {
0% {
transform: translateY(100%);
}
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
</style>
以上代码可以实现无限滚动+自动滚动效果
内部添加两个盒子的原因是为了循环滚动,要个盒子从下向上滚动一个盒子,另一个盒子接着上一个盒子继续滚动
如果想要实现鼠标悬浮时停止滚动可以添加如下代码
.rollBody:hover .scroll-list{
animation-play-state: paused;
}
.rollBody:hover .scroll-list1{
animation-play-state: paused;
}