css实现自动滚动效果

首先给外部一个盒子用来限制高度，再给个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;
}