Karaoke subtitle effect_javascript skills

The subtitles in karaoke will gradually light up as the song progresses. Since the subtitles do not light up one by one but gradually transition, when we implement this effect on the web page, we must use two layers to achieve it. The text is the same, the color is different, the bottom layer remains unchanged, and the upper layer is gradually widened to cover the lower layer, this effect is achieved. This principle is also used to achieve this effect in Flash. This article gives basic examples to provide some inspiration.
The key point is: the text size and line height of the two layers are the same, and reasonable position, top, overflow, width style attributes and nowrap HTML attributes are set for the second layer.
Note that different browsers may not be able to achieve this effect due to different interpretations of CSS and lack of support for certain attributes. Please check the example in IE.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Karaoke subtitles effect</title> <table cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%"> <div style="line-height:150%;font-size:14px;">璋</div> </td> </tr> </table>