css3实现无缝滚动,鼠标经过暂停

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')
    })
相关推荐
kymjs张涛19 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
reacx20 分钟前
# 第三章:状态管理架构设计 - 从 Zustand 到 React Query 的完整实践
前端
古夕21 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部21 分钟前
前端-业务-架构
前端·javascript·代码规范
Bug生产工厂22 分钟前
React支付组件设计与封装:从基础组件到企业级解决方案
前端·react.js·typescript
小喷友22 分钟前
阶段三:进阶(Rust 高级特性)
前端·rust
华仔啊22 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
Strayer23 分钟前
Tauri2.0打包构建报错
前端
cpsvps_net24 分钟前
Windows远程FX编解码优化
windows
小高00724 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript