本教程是 range 进度条播放器的延续与扩展，主要探讨在现有播放器基础上，如何实现LRC歌词同步。这里所说的同步是模拟性质的，要真的做到专业级别的LRC歌词同步，需要十分复杂、繁琐的实现机制，我们的方法则是相当简洁的。
本节要讲的内容是如何通过CSS关键帧动画模拟LRC歌词同步，属于UI界面的范畴，暂时和range播放器扯不上关系（不过放心，将range播放器整合过来的时机会很快到来）。思路大概是这样：通过一个歌词容器+伪元素的方法来完成UI的设计，具体而言，容器元素显示底词，伪元素采用 clip-path 的切割方式模拟歌词同步。请看 #lrc 选择器和其伪元素的CSS代码、html详细代码：
<style>
#lrc {
position: absolute;
font: bold 2.4em sans-serif;
color: lightblue;
text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}
#lrc::before {
position: absolute;
content: attr(data-lrc); /* 通过 attr 函数，伪元素接收主元素传递的 data-lrc 文本值接口 */
width: 100%;
height: 100%;
color: transparent; /* 前景色透明 ：文本将呈现元素的背景图片 */
background: linear-gradient(rgba(250,0,0,.7),rgba(0,0,180,.8)); /* 渐变背景 */
background-clip: text; /* 背景切割 ：只在文本上显示背景图片 */
-webkit-background-clip: text; /* Chromium内核前缀属性 ：它实现了text裁切值 */
clip-path: inset(0 60% 0 0); /* 内矩形切割元素 ：60%观察效果用，实际使用时改为100%（开始时全割掉） */
border-bottom: 1px solid navy; /* 底边框 */
}
</style>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
看看效果：
HuaChao LRC
是不是很酷？这是伪元素右边裁切 60% 的效果 [ clip-path: inset(0 60% 0 0); ]。
要点：
（一）CSS里，主元素和伪元素均需要定位，当主元素绝对定位，其宽高会根据里面的（非绝对定位的）内容自动伸缩，宽度在这里尤其重要，它是伪元素切割的尺寸依据，所以，主元素 position: absolute 的设置是很恰当的。当然，设置为相对定位也不是不可以，只是需要加入额外的属性设置，且在帖子中的定位也不那么方便，这里不推荐（但本文的演示使用到了relative定位，出于排版等需要）。
（二）伪元素绝对定位是必须的，这样，100%宽高设置会令它与主元素完全贴合。伪元素的字体不用设计，它继承父元素的值，文本阴影、前景色等也有继承性。伪元素的文本颜色设为透明，因为，我们用 background-clip 属性定义了伪元素的背景颜色剪裁为文字显示，就是说，伪元素的背景只有在文字笔画之上显示出来。这里，我们使用渐变做伪元素的背景，可以使用图片。然后，非常重要的，我们使用 clip-path 来切割伪元素，切割方式是 inset（内矩形切割），按上、右、下、左的顺序布置参数，我们测试用的右边参数为 60% ，只是用来观察效果。最后我们还给伪元素的底边框设置为1像素，像是漂亮的下划线，有一定的修饰和提示作用。
（三）和播放器的时间信息显示原理一样，我们依然使用伪元素的 content: attr(data-xx) 来接收主元素传来的相应值，以便让主元素的文本和伪元素的文本保持一致（将来JS通过 元素.dataset.名称 方法读写 data-xx 值）。这里再次提示，attr() 是一个CSS内置函数，它接收的参数结构固定为 data-名称，data-名称的内容则由html对应元素提供，JS可以对之动态读写。
最后，我们设置一个关键帧动画，并让伪元素运行这个动画。看代码：
<style>
#lrc {
position: absolute;
font: bold 2.4em sans-serif;
color: lightblue;
text-shadow: 1px 1px 1px rgba(0,0,0,.45);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
background: linear-gradient(rgba(250,0,0,.7),rgba(0,0,180,.8));
background-clip: text;
-webkit-background-clip: text;
clip-path: inset(0 100% 0 0); /* 开始时裁切玩右边 */
animation: lrcGo 4s linear forwards; /* 动画停留在最后一个动作 */
border-bottom: 1px solid navy;
}
/* 关键帧动画 ：到裁切 0 （元素初始裁切 100%） */
@keyframes lrcGo { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
效果：
HuaChao LRC
这是不是酷的不要不要的？演示的效果是不停歇地运行，给出的上述代码只运行一次、且结束后停留在最终状态，这是lrc歌词同步的需要。上述代码，可以保存为本地html文档后运行，或将代码复制到 pencil code 测试。
发表于 2024-2-1 08:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-2-1 09:21
发表于 2024-2-1 14:43
发表于 2024-2-1 19:14
