vue或css动画实现列表向上无缝滚动

本文实例为大家分享了vue或css动画实现列表向上无缝滚动的具体代码，供大家参考，具体内容如下

方法一：vue的实现方法

js

css

.b_list{
   height: 19rem;
   overflow: hidden;
}

方法二：纯css动画

html

css

@keyframes scrollTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}
.b_list{
  height: 19rem;
  overflow: hidden;
}
 
.b_scroll{
   -webkit-animation: 10s scrollTop linear infinite normal;
   animation: 10s scrollTop linear infinite normal;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。