青峰网站建设,建筑人才网平台,公众号排版编辑器,自己会网站开发如何赚钱js也可以实现#xff0c;但css3更加的平滑和资源占用更少。下面是具体代码#xff0c;动画要单独用一个类名#xff0c;否则暂停估计不会生效#xff1a;
原理#xff1a;动画向上移动#xff0c;目标完全消失后#xff0c;从头开始#xff0c;注意 动画移动高度是文本…js也可以实现但css3更加的平滑和资源占用更少。下面是具体代码动画要单独用一个类名否则暂停估计不会生效
原理动画向上移动目标完全消失后从头开始注意 动画移动高度是文本高度这个不好控制要微调如果文本是动态的则要把动画通过js生成动态设置移动高度。js实现是获取消失的部分添加到尾部周而复始平滑度很难控制
div classlistdiv classrowup animdiv classtextdiv1111111111111111111111111111111111111111111111/divdiv11111111111111111111111111111111111/divdiv222222222222222222222222222222222。/div/divdiv classtextdiv1111111111111111111111111111111111111111111111/divdiv11111111111111111111111111111111111/divdiv222222222222222222222222222222222。/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)})
