css实现文字无限滚动且悬浮停止移开继续

<div class="main"> 

    <ul class="main-scroll">   

        <li>文字11111</li>   

        <li>文字22222</li> 

    </ul>

</div>

实现文字在main中无限滚动，首尾相连，类似电影字幕，css关键代码如下：

.mian{  height: 30px;  overflow hidden;}

@keyframes moveup {  // 最佳滚动效果，滚动条数*2+1

0% {    transform: translateY(0px);  } 

40% {    transform: translateY(0px);  } 

50% {    transform: translateY(-30px);  } 

90% {    transform: translateY(-30px);  } 

100% {    transform: translateY(-60px);  }

}

.main-scroll {  overflow-y: auto;  animation: 8s moveup liner infinite normal;}

.main:hover .main-scroll{  animation: none;} // 悬浮停止滚动

注：使用js定时器消化性能，且滚动效果不好控制，其中使用scrollTop放大页面比例或有失效，可能没有滚动条的原因；其他API或有兼容性问题