[分享]css3播放器带歌词

CSS3播放器是一种比较新的网页播放器，可以使用纯CSS来创建。与传统的播放器不同，CSS3播放器可以带有歌词，让用户更加方便地同时播放音乐和阅读歌词。要创建CSS3播放器，可以使用伪元素来实现。首先...

CSS3播放器是一种比较新的网页播放器，可以使用纯CSS来创建。与传统的播放器不同，CSS3播放器可以带有歌词，让用户更加方便地同时播放音乐和阅读歌词。

要创建CSS3播放器，可以使用伪元素来实现。首先，我们需要用HTML标记出播放器框架和控制按钮。然后，使用CSS添加样式和动画，以及书写JavaScript代码来实现播放器的逻辑。最后，通过增加歌词内容，即可实现带歌词的CSS3播放器。

//HTML部分
<div class="player">
  <audio id="audioPlayer">
    <source src="歌曲.mp3">
  </audio>
  <div class="control-panel">
    <button id="playButton"></button>
    <button id="pauseButton"></button>
  </div>
  <div class="lyrics">
    <p>[00:00.00] 歌词内容 </p>
    <p>[00:05.00] 歌词内容 </p>
    <p>[00:10.00] 歌词内容 </p>
    <p>[00:15.00] 歌词内容 </p>
    <p>[00:20.00] 歌词内容 </p>
  </div>
</div>

//CSS部分
.player {
  width: 300px;
  height: 180px;
  position: relative;
  background: #333;
  border-radius: 8px;
}

.control-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(51,51,51,0) 0%,#333 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.control-panel button {
  border: none;
  background: none;
  outline: none;
  width: 32px;
  height: 32px;
  margin: 0 10px;
}

.control-panel #playButton {
  background-image: url(play.png);
  background-size: cover;
}

.control-panel #pauseButton {
  background-image: url(pause.png);
  background-size: cover;
}

.lyrics {
  width: 100%;
  height: calc(100% - 50px);
  overflow-y: scroll;
  padding: 10px;
}

.lyrics p {
  margin: 0;
  padding: 5px 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  opacity: 0.5;
}

.lyrics p.active {
  opacity: 1;
  font-weight: bold;
} 

在上述代码中，我们使用了HTML中的audio元素和source元素来引用歌曲文件。控制按钮使用button元素来创建，并使用CSS添加样式。最后，使用p元素来书写歌词内容，并使用CSS改变其样式。在JavaScript中，可以使用audio元素的API来控制播放器的逻辑操作。

总的来说，CSS3播放器是一种简单而又好看的网页播放器，加入歌词后，能够让用户更加方便地体验音乐，具有极高的实用性和美观性。