卡拉 OK 字幕效果

ttx9n · 发表于 2006-8-27 00:00:00

卡拉 OK 中的字幕随着歌曲的进行会逐渐点亮，由于字幕不是一个一个地点亮而是逐渐过渡，所以我们在网页中实现该效果时，要通过两个层来实现，两个层的文字相同，颜色不同，底层不变，上层逐渐拉宽以遮盖下层，就实现了该效果，在 Flash 中实现这种效果时，也是本原理。本文给出基本示例，以求抛砖引玉。
重点是：两层的文字大小和行高相同，为第二个层设置合理的 position、top、overflow、width 样式属性和 nowrap HTML 属性。
注意，不同的浏览器可能因为对 CSS 的解释不同和缺乏某些属性支持，无法实现本效果，请在 IE 中察看示例。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

mkonji · 发表于 2022-12-12 23:31:35

啦啦啦啦啦啦啦啦！

v3sfsi · 发表于 2023-8-13 04:28:17

来看看怎么样

qq303604905 · 发表于 2023-9-26 14:05:28

需要很久了终于找到了

95nd4ba · 发表于 2023-10-5 08:52:25

的谁vdvdsvdsvdsdsv

pwseqn1h · 发表于 2023-11-1 06:40:47

可以，看卡巴

i1efp6c · 发表于 2023-11-4 08:19:02

激动人心，无法言表！

白狐软件 · 发表于 2023-12-3 04:00:23

很好，谢谢分享

.l4 · 发表于 2024-3-2 06:13:08

dfdsafdsfdsfdsf

6q8s6p21 · 发表于 2024-4-9 09:06:16

哦哦哦哦哦哦哦哦哦

账号		自动登录	找回密码
密码			立即注册

[JavaScript] 卡拉 OK 字幕效果

相关帖子