css3实现无缝滚动效果
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 @keyframes move 8 { 9 0% 10 { 11 transform:translateX(0px); 12 } 13 100% 14 { 15 transform:translateX(-500px); 16 } 17 } 18 ul{margin:0;padding:0; list-style:none;} 19 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto; 20 21 overflow:hidden;} 22 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;} 23 .picTab li 24 25 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff; 26 27 font:50px/98px "宋体"; text-align:center;} 28 .picTab:hover ul{ animation-play-state:paused;} 29 </style> 30 </head> 31 <body> 32 <section class="picTab"> 33 <ul> 34 <li>1</li> 35 <li>2</li> 36 <li>3</li> 37 <li>4</li> 38 <li>5</li> 39 <li>1</li> 40 <li>2</li> 41 <li>3</li> 42 <li>4</li> 43 <li>5</li> 44 </ul> 45 </section> 46 </body> 47 </html>
效果图:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析