js 滚动公告栏

<div class="marquee">
  <div class="marquee-content">
    <span>公告1</span>
    <span>公告2</span>
    <span>公告3</span>
  </div>
</div>

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

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

.marquee-content span {
  margin-right: 20px;
  font-size: 18px;
}

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

// 如果需要动态更新公告内容，可以使用JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const marqueeContent = document.querySelector('.marquee-content');
  const announcements = ['新功能上线', '优惠活动进行中', '系统维护通知'];
  
  function updateAnnouncements() {
    const randomAnnouncement = announcements[Math.floor(Math.random() * announcements.length)];
    const newSpan = document.createElement('span');
    newSpan.textContent = randomAnnouncement;
    marqueeContent.appendChild(newSpan);
    
    // 移除最旧的公告
    if (marqueeContent.children.length > 3) {
      marqueeContent.removeChild(marqueeContent.firstChild);
    }
  }

  setInterval(updateAnnouncements, 5000); // 每5秒更新一次公告
});