前言
ktv 屏幕歌词在唱歌过程中，字体颜色是逐渐高亮渐变的，怎么实现这个效果？不能用 CSS 镂空字体
看到后，就想着写个demo嘛！
111.gif
分析
- 每一句歌词的时间
- 当前一句歌词唱完的操作
- 歌词唱完的操作
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ktv 歌词</title>
<style>
* {
padding: 0;
margin: 0;
}
:root {
--length: 0%;
}
li {
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
text-align: center;
}
#line {
position: fixed;
bottom: 30px;
font-size: 24px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
color: transparent;
background: linear-gradient(to right, #008c8c 0%, #e66465 0%, #9198e5);
background-clip: text;
-webkit-background-clip: text;
animation: KTV 2s ease infinite;
}
@keyframes KTV {
0% {
background: linear-gradient(
to right,
#008c8c var(--length),
#e66465 var(--length),
#9198e5
);
background-clip: text;
-webkit-background-clip: text;
}
100% {
background: linear-gradient(
to right,
#008c8c var(--length),
#e66465 var(--length),
#9198e5
);
background-clip: text;
-webkit-background-clip: text;
}
}
</style>
</head>
<body>
<span>
<span id="line"></span>
<ul>
<li>有些话不知怎么对你讲</li>
<li>是不是其实我们都一样</li>
<li>就算是受了伤也要装得很坚强</li>
<li>不会让泪水轻易流淌</li>
<li>遇到了挫折也不要失望</li>
<li>我们还有最初的梦想</li>
<li>在心上在远方等着你和我去闯</li>
<li>不要躲在这个角落里彷徨</li>
<li>我知道黑夜不会太长</li>
<li>有梦就有了希望</li>
<li>把不该有的迷茫</li>
<li>有梦就有了希望</li>
<li>化作前进的力量</li>
<li>任谁都无法阻挡</li>
<li>一路闪耀着光芒</li>
<li>在这残酷的战场</li>
<li>是男人就挺起胸膛</li>
</ul>
<script>
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum);
break;
default:
return 0;
break;
}
}
const listDom = document.querySelectorAll("li");
const line = document.querySelector("#line");
let size = 0;
let timer;
let index = 0;
let time = 1000;
let timeout;
function Ktv() {
timeout = setTimeout(() => {
time = randomNum(2, 6) * 1000;
size = 0;
if (index > listDom.length) {
index = 0;
}
line.innerText = listDom[index].innerText;
if (timer) {
clearInterval(timer);
}
timer = setInterval(() => {
document.documentElement.style.setProperty(
"--length",
size + "%"
);
size++;
}, time / 100);
index++;
clearTimeout(timeout);
Ktv();
}, time);
}
Ktv();
</script>
</span>
</body>
</html>
结语
这里仅仅是模拟！代码也不多，核心代码也就几行吧！这里也不考虑每个次的高音等问题，因为词的高低音等需要数据。这里仅仅在说实现原理！没事记录一下吧！
