php个人网站源码seo优化网站查询

js也可以实现，但css3更加的平滑和资源占用更少。下面是具体代码，动画要单独用一个类名，否则暂停估计不会生效：

原理：动画向上移动，目标完全消失后，从头开始，注意 动画移动高度是文本高度，这个不好控制要微调，如果文本是动态的则要把动画通过js生成动态设置移动高度。js实现是获取消失的部分，添加到尾部，周而复始，平滑度很难控制

<div class="list"><div class="rowup anim"><div class="text"><div>1111111111111111111111111111111111111111111111：</div><div>11111111111111111111111111111111111</div><div>222222222222222222222222222222222。</div></div><div class="text"><div>1111111111111111111111111111111111111111111111：</div><div>11111111111111111111111111111111111</div><div>222222222222222222222222222222222。</div></div></div>
</div>

   .list {position: relative;width: 200px;height: 127px;overflow: hidden;color: #FFFFFF;border: 1px solid white;text-align: left;}.list .rowup {height: 127px;position: relative;}.anim {animation: 5s rowup linear infinite normal;}/*暂停*/.pause {animation-play-state: paused;}@keyframes rowup {0% {transform: translate3d(0, 0, 0);}100% {transform: translate3d(0, -167px, 0);/*文本高度*/}}

 $(".rowup").hover(function(){$(this).addClass('pause')},function(){$(this).removeClass('pause')})