用通义灵码喝鸡汤，天天正能量！

// 鸡汤语录数据集
const quotes = [
  '坚持就是胜利，放弃才是失败',
  '每天进步1%，一年强大37倍',
  '机会永远留给有准备的人',
  '黑夜无论怎样悠长，白昼总会到来',
  '成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。',
  '黑夜无论怎样悠长，白昼总会到来。',
];
// 获取容器元素
const bannerContainer = document.querySelector('.banner-container');
// 动态生成多个语录
function generateQuotes() {
  quotes.forEach((quote, index) => {
    // 创建新的quote容器
    const quoteContainer = document.createElement('div');
    quoteContainer.classList.add('quote-container');
    
    // 随机设置每个quote的垂直位置
    const verticalPosition = Math.random() * 60 + 20; // 随机位置，保证不重叠
    quoteContainer.style.top = `${verticalPosition}vh`; // 根据视口高度设置
    // 设置动画延迟时间
    const delay = Math.random() * 5; // 每个quote有不同的延迟时间
    
    // 内部内容
    quoteContainer.innerHTML = `<p class="quote-text">${quote}</p>`;
    
    // 设置延迟时间
    quoteContainer.style.animationDelay = `${delay}s`;
    
    // 添加到banner容器中
    bannerContainer.appendChild(quoteContainer);
  });
}
// 初始化，生成语录
generateQuotes();

/* 全屏布局 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #ff6a00, #ffcc00); /* Colorful gradient background */
  font-family: Arial, sans-serif;
  overflow: hidden; /* Hide overflow for smooth movement */
}
/* 容器 */
.banner-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* 引用内容 */
.quote-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2rem;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 2;
  opacity: 0;
  animation: barrage 20s ease-out infinite; /* Slow, smooth horizontal barrage animation */
}
/* 动画：横屏缓慢飘过（弹幕效果） */
@keyframes barrage {
  0% {
    opacity: 0;
    transform: translateX(100vw); /* Start from the far right */
  }
  50% {
    opacity: 1;
    transform: translateX(50vw); /* Midway: the center of the screen */
  }
  100% {
    opacity: 0;
    transform: translateX(-100vw); /* End: exit to the far left */
  }
}
/* 呼吸动画效果 */
@keyframes breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* 按钮样式 */
.nav-btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  transition: background 0.3s;
}
.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
.prev-btn {
  left: 20px;
}
.next-btn {
  right: 20px;
}
/* 语录容器渐变背景 */
.quote-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  z-index: -1;
}