利用原生HTML + CSS + JS实现歌词滚动

要实现歌词滚动，可以通过CSS的animation和@keyframes来创建滚动效果，并结合JavaScript来控制歌词的切换。以下是一个简单的实现示例：

HTML:

<div class="lyrics-container">
  <ul class="lyrics">
    <li class="lyric">第一句歌词</li>
    <li class="lyric">第二句歌词</li>
    <li class="lyric">第三句歌词</li>
    <!-- 更多歌词 -->
  </ul>
</div>

CSS:

.lyrics-container {
  overflow: hidden;
  position: relative;
  height: 50px; /* 根据需要设定歌词显示区域的高度 */
}
 
.lyrics {
  position: absolute;
  width: 100%;
  animation: scrollLyrics 5s linear infinite; /* 调整时长以改变滚动速度 */
}
 
.lyric {
  line-height: 50px; /* 与.lyrics-container的高度相同 */
}
 
@keyframes scrollLyrics {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(-50px);
  }
}

JavaScript (切换歌词):

// 假设有一个函数来获取下一句歌词并更新显示
function nextLyric() {
  const lyricsContainer = document.querySelector('.lyrics-container');
  const lyrics = document.querySelectorAll('.lyric');
  // 获取当前显示的歌词索引
  let currentIndex = Array.from(lyricsContainer.children).indexOf(lyrics[0]);
  // 计算下一句歌词的索引
  let nextIndex = (currentIndex + 1) % lyrics.length;
  // 更新显示的歌词
  lyricsContainer.appendChild(lyrics[nextIndex]);
}
 
// 设置定时器每隔一定时间调用nextLyric函数
setInterval(nextLyric, 5000); // 时间间隔应与CSS动画时长相匹配

这个简单的例子实现了歌词的循环滚动。你可以根据需要调整CSS中.lyrics-container的高度和.lyrics的animation时长来改变滚动速度。JavaScript部分用于切换显示的歌词，并且可以通过设置setInterval的时间来控制歌词更新的频率。