js实现状态栏跑马灯

<div id="marquee-container">
  <span id="marquee-content">这是一个跑马灯效果的示例！</span>
</div>

#marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

#marquee-content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

document.addEventListener("DOMContentLoaded", function() {
  const content = document.getElementById('marquee-content');
  const containerWidth = document.getElementById('marquee-container').offsetWidth;
  const contentWidth = content.offsetWidth;

  // Adjust the animation duration based on content length
  const duration = (contentWidth / containerWidth) * 15; // 15s is a base duration
  content.style.animationDuration = `${duration}s`;
});