css仿歌词滚动效果

以下是一个简单的CSS实现歌词滚动效果的示例：

HTML代码：

<div class="lyrics-container">
  <div class="lyrics">
    <p>Verse 1</p>
    <p>Somebody once told me the world is gonna roll me</p>
    <p>I ain't the sharpest tool in the shed</p>
    <p>She was looking kind of dumb with her finger and her thumb</p>
    <p>In the shape of an "L" on her forehead</p>
    <p></p>
    <p>Chorus</p>
    <p>Hey now, you're an all-star, get your game on, go play</p>
    <p>Hey now, you're a rock star, get the show on, get paid</p>
    <p>And all that glitters is gold</p>
    <p>Only shooting stars break the mold</p>
    <p></p>
    <p>Verse 2</p>
    <p>It's a cool place and they say it gets colder</p>
    <p>You're bundled up now, wait till you get older</p>
    <p>But the meteor men beg to differ</p>
    <p>Judging by the hole in the satellite picture</p>
    <p></p>
    <p>Chorus</p>
    <p>Hey now, you're an all-star, get your game on, go play</p>
    <p>Hey now, you're a rock star, get the show on, get paid</p>
    <p>And all that glitters is gold</p>
    <p>Only shooting stars break the mold</p>
  </div>
</div>

CSS代码：

.lyrics-container {
  height: 200px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器高度的内容 */
}

.lyrics {
  position: relative; /* 设置相对定位 */
  top: 0; /* 初始位置为0 */
  animation: scroll 20s linear infinite; /* 设置动画 */
}

@keyframes scroll {
  0% {
    top: 0; /* 初始位置为0 */
  }
  100% {
    top: -100%; /* 移动到最上方 */
  }
}

.lyrics p {
  margin: 0; /* 去除段落的默认边距 */
  line-height: 1.5; /* 设置行高 */
  text-align: center; /* 居中对齐 */
  padding: 10px 0; /* 设置上下内边距 */
}

解释：

首先，我们创建一个容器（.lyrics-container），用于包含歌词。我们设置容器的高度为200px，并将其内容超出的部分隐藏起来（overflow: hidden）。

在容器中，我们创建一个

元素（.lyrics），用于包含所有歌词。我们将其设置为相对定位（position: relative），并将其初始位置设置为0（top: 0）。

接下来，我们使用CSS动画（animation）来实现歌词的滚动效果。我们定义了一个名为scroll的动画，持续时间为20秒，使用线性缓动函数，并设置为无限循环（infinite）。在动画中，我们将歌词的位置从初始位置（0）移动到最上方（-100%）。

最后，我们对每个歌词段落（

元素）应用一些样式，包括去除默认边距（margin: 0）、设置行高（line-height: 1.5）、居中对齐（text-align: center）和设置上下内边距（padding: 10px 0）。

这样，我们就可以实现一个简单的CSS歌词滚动效果。