<在 pre 標簽內(nèi)輸入代碼時可能會出現(xiàn)換行問題，請參照上面的內(nèi)容進行排版。>CSS展示歌詞 CSS是層疊樣式表的縮寫，用于控制HTML及XML的呈現(xiàn)方式。在音樂播放器中，歌詞展示是重要的一項功能，而CSS也可以幫助我們實現(xiàn)這個功能。下面我們就來介紹一下如何利用CSS來展示歌詞。 首先，我們需要將歌詞的內(nèi)容以及其對應的時間戳以一定的格式保存下來，例如：

[00:00.00]正文1
[00:05.00]正文2
[00:10.00]正文3

其中，“[]”內(nèi)為時間戳，00:00.00表示0分0秒，00:05.00表示0分5秒，以此類推。正文則代表該時間段內(nèi)顯示的歌詞內(nèi)容。 接著，我們需要將歌詞展示的區(qū)域設為滾動條，這樣可以讓用戶在歌詞較長的情況下便于觀看。 ```css /* 將歌詞區(qū)域設置為滾動條 */ .lyric { height: 240px; overflow: hidden; overflow-y: scroll; } ``` 在實現(xiàn)滾動條后，我們需要為每句歌詞添加樣式，使其在對應時間出現(xiàn)并帶有高亮效果。首先，我們可以使用JavaScript獲取到當前播放的時間，然后計算出此時應該顯示哪一句歌詞，并為其添加高亮樣式。 ```js // 獲取當前播放時間 var currentTime = audio.currentTime; // 遍歷歌詞數(shù)據(jù) for (var i = 0; i< lyricData.length; i++) { if (currentTime >lyricData[i].time && (!lyricData[i + 1] || currentTime< lyricData[i + 1].time)) { // 添加高亮樣式 lyricList[i].classList.add('active'); } else { // 移除高亮樣式 lyricList[i].classList.remove('active'); } } ``` 在JavaScript中添加樣式后，我們需要使用CSS來定義高亮樣式。 ```css /* 歌詞默認樣式 */ .lyric li { text-align: center; line-height: 24px; } /* 歌詞高亮樣式 */ .lyric li.active { color: #f00; font-weight: bold; } ``` 這樣就可以實現(xiàn)波形圖展示歌詞的效果了。至于如何將歌詞數(shù)據(jù)分離出來以及如何進行時間戳的計算，在此不再贅述，感興趣的讀者可自行尋找資料。 本文介紹了如何使用CSS來展示歌詞，希望能對大家有所幫助。