:current伪类目前未被任何浏览器实现，无法用于字幕高亮；必须用javascript动态添加.active类并配合opacity/color等轻量动效实现可控高亮。
:current 伪类不能用于字幕高亮，因为它目前**没有被任何浏览器实现**——它仍停留在 CSS Selectors Level 4 草案阶段，连实验性支持都没有。想靠 :current 实现字幕行自动高亮 + 动效，直接无效。
为什么 :current 在字幕场景下完全不可用
浏览器解析 HTML 时根本不会识别 :current，写上也毫无反应。你检查开发者工具的“Styles”面板，会发现该选择器压根不被解析、不参与匹配。这不是兼容性差的问题，而是“不存在”的问题。
替代方案：用 JavaScript + class 控制当前字幕行
实际项目中，字幕高亮必须依赖 JS 判断播放时间点，再给对应 <span></span> 或 <p></p> 添加 .active（或 .current-line）类。动效就基于这个类来写：
- 动效必须用
transition或@keyframes配合.active类触发，不能指望伪类自动响应 - 避免在
.active中写transform: scale(1.1)这类会触发重排的属性；优先用opacity、color、text-shadow、box-shadow - 若需“逐行呼吸式高亮”，动画应设为
animation: highlight 1.8s ease-out 1，而非infinite—— 否则字幕跳转时动画会残留或错位 - 注意字幕 DOM 更新时机：若用
innerHTML替换整段字幕，旧.active类会被清掉，需确保 JS 重新计算并添加
常见翻车点：伪元素 + :current 混搭写法
有人尝试这样写：
p:current::before {
content: "▶";
animation: pulse 2s infinite;
}
结果是：什么也不显示。原因有二：
-
:current不生效 →::before根本不会渲染 - 即使未来某天浏览器支持了
:current，::before插入内容也无法触发重绘来驱动字幕行定位逻辑 —— 它只是静态装饰
真正可控的方式，是让 JS 明确操作 DOM 节点，并把动效绑定到可预测的 class 上。
动效参数建议：光晕/色彩变化比缩放更稳
字幕区域通常窄、行高紧凑，动效稍猛就会干扰阅读。实测较稳妥的组合：
- 高亮色用
color: #ff6b6b+text-shadow: 0 0 6px rgba(255,107,107,0.4) - 过渡用
transition: color 0.25s cubic-bezier(0.33, 1, 0.68, 1), text-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1) - 若需强调，加
font-weight: 600，但别用transform: scale()—— 它会让相邻字幕行上下跳动
最易被忽略的一点：动效节奏必须和字幕停留时长对齐。比如一行显示 2.5 秒，那么 transition 或 animation 的持续时间就不该超过 1.2 秒，否则用户还没读完，高亮就已经开始淡出了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
