html函数如何制作滚动公告效果 html函数marquee元素的替代方案

<div class="scroll-container">
  <div class="scroll-text">
    欢迎访问我们的网站！最新活动已上线，点击查看详情。
  </div>
</div>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background-color: #f0f0f0;
  padding: 10px 0;
}

.scroll-text {
  display: inline-block;
  font-size: 16px;
  color: #333;
  animation: scroll-left 15s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

<div id="scrollContainer" class="scroll-container">
  <div id="scrollText" class="scroll-text">
    紧急通知：系统将于今晚23点进行维护，请提前保存数据。
  </div>
</div>

<script>
const container = document.getElementById('scrollContainer');
const text = document.getElementById('scrollText');
let position = container.offsetWidth;

function scrollText() {
  position--;
  if (position < -text.offsetWidth) {
    position = container.offsetWidth;
  }
  text.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(scrollText);
}

scrollText(); // 启动滚动
</script>

<style>
.scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-text {
  white-space: nowrap;
  position: absolute;
  font-weight: bold;
  color: red;
}
</style>

<div class="ticker">
  <div class="ticker-items" id="tickerItems">
    <div>第一条公告内容</div>
    <div>第二条重要通知</div>
    <div>第三条活动提醒</div>
  </div>
</div>

<style>
.ticker {
  height: 40px;
  overflow: hidden;
  background: #003366;
  color: white;
  padding: 0 20px;
}

.ticker-items > div {
  height: 40px;
  line-height: 40px;
}

@keyframes slide-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

.ticker-items {
  animation: slide-up 8s steps(3) infinite;
}
</style>