css 实现滚动效果

在做中奖列表的时候, 需要做一个名单上下滚动的效果, 纯css 效果就可以实现

<div class="marquee">         
  <div class="row">
      <span class="col">20190710</span>
      <span class="col">北京市昌平区建材城西路金燕龙写字</span>
      <span class="col">1000010</span>
      <span class="icon-dot"></span>
   </div>
    <div class="row">
      <span class="col">20190710</span>
      <span class="col">北京市昌平区建材城西路金燕龙写字</span>
      <span class="col">1000010</span>
      <span class="icon-dot"></span>
   </div>
    <div class="row">
      <span class="col">20190710</span>
      <span class="col">北京市昌平区建材城西路金燕龙写字</span>
      <span class="col">1000010</span>
      <span class="icon-dot"></span>
   </div>
    <div class="row">
      <span class="col">20190710</span>
      <span class="col">北京市昌平区建材城西路金燕龙写字</span>
      <span class="col">1000010</span>
      <span class="icon-dot"></span>
   </div>
</div>                            

css  hovr 的时候就停止滚动 

.marquee {
    animation: row 10s linear infinite;
}
.marquee:hover {
    animation-play-state: paused;
}

这样的可以实现滚动了, 是不是很简单

但是这样也有个问题, 就是滚到一半的时候  突然就闪现从头开始, 这个时候最好js 拷贝一份再插入到后面

    //滚动
    //原理：把marquee下面的子盒子都复制一遍 加入到marquee中
    //      然后动画向上滚动，滚动到一半重新开始滚动
    //因为选取的是两个marquee  所以要遍历
    $('.marquee').each(function (index, dom) {
        //将每个 的所有子级都复制一遍
        var rows = $(dom).children().clone();
        //再将新的到的加入原来的
        $(dom).append(rows);
    });

这样就就好了, 比用js实现好多了