html 字符串 跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字跑马灯 CSS+JS完美实现</title> <style type="text/css"> #string-horse-race-lamp * { margin: 0; padding: 0; } #string-horse-race-lamp .marquee-container { position: relative; width: 80%; height: 50px; margin: 0 auto; line-height: 50px; background-color: cadetblue; overflow: hidden; } #string-horse-race-lamp .marquee-box { position: absolute; display: inline-block; color: #fff; white-space: nowrap; animation: marquee 5s linear infinite; } #string-horse-race-lamp .marquee-container:hover .marquee-box { animation-play-state: paused; } @keyframes marquee { 0% { left: 100%; } 100% { left: 0%; transform: translateX(-100%); } } </style> </head> <body> <div id='string-horse-race-lamp'> <div class="marquee-container"> <div class="marquee-box"> <p>123456789</p> </div> </div> </div> </body> </html> <script> (function(){ let containerWidth = document.querySelector('#string-horse-race-lamp .marquee-container').offsetWidth, boxWidth = document.querySelector('#string-horse-race-lamp .marquee-container .marquee-box').offsetWidth, duration = (boxWidth * 2 + containerWidth) / 150 + 's'; document.querySelector('#string-horse-race-lamp .marquee-container .marquee-box').style.cssText = 'animation-duration:' + duration; })(); </script>
文字跑马灯 CSS+JS完美实现
123456789
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术