css 实现KTV 歌词效果

前言

ktv 屏幕歌词在唱歌过程中，字体颜色是逐渐高亮渐变的，怎么实现这个效果？不能用 CSS 镂空字体

看到后，就想着写个demo嘛！

111.gif

分析

• 每一句歌词的时间
• 当前一句歌词唱完的操作
• 歌词唱完的操作

实现

  
    
    
    
    
    
  
  
    
      
      

        
有些话不知怎么对你讲
        
是不是其实我们都一样
        
就算是受了伤也要装得很坚强
        
不会让泪水轻易流淌
        
遇到了挫折也不要失望
        
我们还有最初的梦想
        
在心上在远方等着你和我去闯
        
不要躲在这个角落里彷徨
        
我知道黑夜不会太长
        
有梦就有了希望
        
把不该有的迷茫
        
有梦就有了希望
        
化作前进的力量
        
任谁都无法阻挡
        
一路闪耀着光芒
        
在这残酷的战场
        
是男人就挺起胸膛
      

      
    
  

结语

这里仅仅是模拟！代码也不多，核心代码也就几行吧！这里也不考虑每个次的高音等问题，因为词的高低音等需要数据。这里仅仅在说实现原理！没事记录一下吧！