文章目录
  1. 1. 代码
  2. 2. 效果预览

实现原理相当简单,也没有任何适配兼容问题,就是叠加2层相同文字的歌词div,底层默认显示,顶层默认宽度设置成0,overflow设置成hidden
然后修改顶层的宽度看到的就是覆盖效果

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
.wrapper{
color: #000000;
position: relative;
width: 90%;
height: 30px;
margin: 10px;
}

.wrapper >div{
position: absolute;
left: 0;top: 0;right: 0;bottom: 0;
overflow: hidden;
white-space: nowrap;
font-weight: bold;
font-size: 16px;
letter-spacing: 3px;
}

.wrapper .cover{
color: red;
width: 0;
-webkit-transition: 13s 0s linear;
}

</style>


<div class="wrapper">
<div class="text">神奇的滚动覆盖效果,Amazing!</div>
<div class="cover">神奇的滚动覆盖效果,Amazing!</div>
</div>
<button onclick="doIt()">试试效果 do it!</button>
<script>
function doIt(){
document.querySelector(".wrapper .cover").style.width = "100%";
}
</script>

效果预览


神奇的滚动覆盖效果,Amazing!

神奇的滚动覆盖效果,Amazing!

相关: js解析Lrc歌词制作滚动歌词

当然这只是个简单的例子,在实际开发中你可以将歌词上一句时间和下一句时间的时间差计算出来,然后把这个时间差赋值给transition-time,这样就可以给每句歌词做到不同的渐变时间效果了。

此文是本站原创,转载请标注作者和链接出处!