歌词滚动的html代码
时间: 2023-08-13 10:02:32 浏览: 118
以下是一个简单的歌词滚动 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>歌词滚动</title>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
font-size: 24px;
text-align: center;
}
#lyrics {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div id="lyrics">
<!-- 歌词内容 -->
你的眼神,像星空一样深邃
我想靠近,却又害怕被拒绝
...
</div>
<script>
var lyricsDiv = document.getElementById("lyrics");
var lyricsText = lyricsDiv.textContent;
lyricsDiv.textContent = "";
// 将歌词内容以空格分隔为数组
var lyricsArray = lyricsText.split(" ");
// 将歌词数组中的每个单词包装在 span 标签中
for (var i = 0; i < lyricsArray.length; i++) {
var span = document.createElement("span");
span.textContent = lyricsArray[i] + " ";
lyricsDiv.appendChild(span);
}
// 开始滚动歌词
var spanIndex = 0;
var intervalID = setInterval(function() {
var spans = lyricsDiv.querySelectorAll("span");
spans[spanIndex].classList.add("active");
spanIndex++;
if (spanIndex >= spans.length) {
clearInterval(intervalID);
}
}, 1000); // 每秒滚动一个单词
</script>
</body>
</html>
```
这个代码使用了 `position: absolute` 和 `transform: translate` 来把歌词居中显示,使用了 `white-space: nowrap` 和 `overflow: hidden` 来保证歌词不换行并且超出部分被隐藏。JavaScript 部分把歌词内容分割成单词,并把每个单词包装在 `span` 标签中,然后使用 `setInterval` 定时器来逐个滚动这些单词。在 CSS 中,你可以使用 `.active` 类来显示当前正在滚动的单词,例如:
```css
#lyrics span.active {
color: yellow;
}
```