本例，我们使用一个自定义HTML标签 lrc-geci 及其伪元素展示lrc歌词同步的原理：主元素显示歌词底板，伪元素以相同的歌词不同的前景色覆盖其上模拟同步状态。伪元素的 content 属性是核心实现机制，通过设置属性值 attr(data-xx) 装载与主元素一样的文本，然后通过一些CSS小技巧控制其宽度，这样，歌词同步模拟就可以通过CSS关键帧动画实现，并通过JS对之进行控制。本文仅展示其UI原理，即，伪元素对主元素的覆盖效果，请看代码：

<style>
lrc-geci {
    font: bold 2.4em sans-serif;
    color: lightgreen;
    border: 1px solid lightblue;
    position: absolute;
}
lrc-geci::before {
    position: absolute;
    content: attr(data-lrc);
    color: green;
    width: 25%;
    white-space: pre;
    overflow: hidden;
}
</style>

<lrc-geci data-lrc="君不见黄河之水天上来">君不见黄河之水天上来</lrc-geci>

运行代码

上面展示的代码，lrc-geci 及其伪元素 ::before 均使用绝对定位，这样它们的尺寸将由内部的文本决定。伪元素的 white-space: pre; 和 overflow: hidden; 非常重要，是保证文本逐一显示的关键。

前一篇: 没有了
下一篇: 让子元素在父元素边界内移动