HTML 页面文字滚动显示

HTML

<div id="app">
    <div class="box">
        <div class="content">
【通知】尊敬的用户： 为了提升服务质量，我们将于 2024 年 2 月 25 日进行系统维护。届时，将暂停部分在线功能的使用。 维护时间：2024 年 2 月 25 日（星期五）上午 9:00 至下午 3:00。 受影响的功能包括： 在线支付服务 账户注册和登录 客户支持服务 其他功能将正常运行，不受影响。 我们深感抱歉给您带来的不便，请您提前做好相应准备。如有任何疑问或需要帮助，请随时联系我们的客服团队。 感谢您对我们的支持与理解！ 祝您生活愉快！ 此致 何星星创新投资工作室管理团队 敬上
        </div>
    </div> 
</div> 

CSS

#app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.box {
  position: absolute;
  height: 22px;
  width: 980px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fca5a5;
  color: #fff;
  overflow: hidden;
}

.content {
  white-space: nowrap;
  width: max-content;
  animation: roll 45s infinite linear;
}

@keyframes roll {
  0% {
    transform: translateX(var(--show-width));
  }
  100% {
    transform: translateX(-100%);
  }
}
.content:hover{
animation-play-state: paused;
}

JS

const contentEl = document.querySelector('.content');
const speed = 60;
contentEl.style.animationDuration = contentEl.clientWidth / speed + 's';

More

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee