当前位置: 首页 > news >正文

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')})

http://www.lryc.cn/news/306968.html

相关文章:

  • SpringCache缓存专题
  • Doris实战——结合Flink构建极速易用的实时数仓
  • 阿里开源低代码引擎 - Low-Code Engine
  • 2024-02-23(Spark)
  • 【JavaSE】实用类——枚举类型、包装类、数学类
  • Qt中常见的JS类和函数(二): 全局对象
  • mysql 安装 与 使用
  • 2月26日做题总结(C/C++真题)
  • 创作纪念日:记录我的成长与收获
  • 全志H713/H618方案:调焦电机(相励磁法步进电机)的驱动原理、适配方法
  • excel数据导入到数据库的方法
  • Runaway Queries 管理:提升 TiDB 稳定性的智能引擎
  • K8S部署Java项目(Gitlab CI/CD自动化部署终极版)
  • 对Redis锁延期的一些讨论与思考
  • 【高德地图】Android高德地图初始化定位并显示小蓝点
  • 继电器测试中需要注意的安全事项有哪些?
  • Java向ES库中插入数据报错:I/O reactor status: STOPPED
  • vue3实现页面跳转
  • 【Linux运维系列】vim操作
  • Centos服务器部署前后端项目
  • 【初始RabbitMQ】延迟队列的实现
  • spark为什么比mapreduce快?
  • Unity通过XXpermission插件获取MANAGE_EXTERNAL_STORAGE权限
  • 「连载」边缘计算(二十一)02-26:边缘部分源码(源码分析篇)
  • Unity(第四部)新手组件
  • 【JS】【Vue3】【React】获取鼠标位置的方法:JavaScript、Vue 3和React示例
  • [Docker 教学] 常用的Docker 命令
  • 小程序应用、页面、组件生命周期
  • Springboot中如何记录好日志
  • vm 虚拟机中ubuntu环境配置共享文件夹的方式