黑马程序员技术交流社区

标题: 卡拉 OK 字幕效果 [打印本页]

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

作者: efkllx 时间: 2016-11-12 12:19
666.这么久没思考出来的问题一下就明白了

作者: 西红柿烩饼 时间: 2016-11-14 22:39
围观下，求大神指导下

作者: aA772807986 时间: 2016-11-21 22:53
学习学习!!!

作者: 驻望向北 时间: 2016-11-24 08:05
看看看看

作者: 单先生 时间: 2016-11-26 20:53
666666666666

作者: lcy1069 时间: 2016-12-28 12:05
学习了~~~~~~

作者: asfadsg 时间: 2017-7-3 15:47
hgjfj,hvvb;lkjfggjllkjhgfg

作者: 霸皇VS暴君 时间: 2017-7-13 14:35

作者: jingge 时间: 2017-7-13 15:54
进来看看

作者: yzwljlb 时间: 2017-7-19 09:04
看一看，学一学，顶一顶

作者: lih920 时间: 2017-8-27 16:46
感谢楼主分享

作者: xue810511653 时间: 2017-8-27 21:30
6666666666666666666666666666

作者: reader799 时间: 2017-8-31 22:04
好好学习天天向上

作者: 陌小侠 时间: 2017-9-5 19:51
好好好好好好好好

作者: slayer 时间: 2017-9-7 15:15
6666666666666666666666666666666666666666

作者: Crazy丶筱诺 时间: 2017-9-7 17:56
1111111111111111111

作者: mcclcm 时间: 2017-9-11 09:23
.......................................................................................

作者: tianruily 时间: 2017-9-12 00:12
赞赞赞赞赞赞，棒棒哒哒

作者: woaiqin 时间: 2017-9-12 17:00
66666阔以

作者: 可恶的小蛋 时间: 2017-9-12 21:00
来看一看

作者: sAsd123 时间: 2017-9-18 08:18

什么效果

作者: shay周 时间: 2017-9-28 20:19
恩恩恩呢饿呢嗯嫩好

作者: 你大爷来了 时间: 2017-9-29 09:57
666666666666666666

作者: newu 时间: 2017-10-3 09:31
1111111111111111111

作者: xgwhsgws 时间: 2017-10-3 09:37
很有用，值得学习，感谢楼主分享

作者: 范儿 时间: 2017-10-29 11:43
66666666666666666

作者: ufoajlasd 时间: 2017-10-30 23:46
地方撒地方撒地方撒打发点

作者: 像只香芋 时间: 2017-11-11 16:04
好开心啊

作者: yx9 时间: 2017-11-11 17:42
卡拉 OK 字幕效果

作者: 北京爱情 时间: 2017-11-11 21:28
学习使我快乐

作者: 后来的我们丶 时间: 2017-11-12 21:26
66666666666666666666

作者: 南栀 时间: 2017-11-21 19:29
6666666666666666666666

作者: 虾123 时间: 2017-11-26 17:57
想要下载啊啊啊！！！！

作者: lge244 时间: 2017-11-27 10:50
asdasdasdas

作者: Mr.Liu0713 时间: 2017-12-15 10:55
好好学习天天向上

作者: power123 时间: 2017-12-28 15:33
呀呀呀哎呀啊啊呀呀啊啊啊呀呀呀呀呀呀呀呀

作者: 孝宇兄 时间: 2017-12-30 11:34
感谢分享

作者: 云中 时间: 2017-12-31 10:26
1111111111111111

作者: w9879400 时间: 2018-1-9 21:39
11111111111111

作者: 吴吴大哥 时间: 2018-1-24 16:55
很好的东子都是大家分享的

作者: Dadihqz 时间: 2018-2-9 17:18
aaaaaaaaaaaaaaaaaaaaaaa

作者: addddddddddddd 时间: 2018-2-15 00:08
fsssssssssssssssssss

作者: 兄弟勇闯天涯 时间: 2018-2-26 16:00
http://www.easyicon.net/iconsear ... net/iconsearch/ios/

作者: 满天星 时间: 2018-3-13 08:14
有用6666666666666666666

作者: ktlcl 时间: 2018-3-18 10:25
感谢楼主分享~

作者: 黑帽侠 时间: 2018-3-30 10:49
感谢分享

作者: 归期有期 时间: 2018-3-30 12:06
看看吧哈哈哈哈

作者: yql214 时间: 2018-5-19 09:56
333333333333333

作者: xiaoyucc521 时间: 2018-7-16 21:24
好资源，大黑马

作者: 番茄炒鸡蛋 时间: 2018-7-17 09:02
学习一下

作者: 281737932 时间: 2018-9-12 19:15
6666666666666

作者: 黑白i 时间: 2018-10-12 01:13
赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞

作者: 不想起名字啊 时间: 2018-10-13 10:53
感谢分享，辛苦了

作者: 1151508346 时间: 2018-10-14 07:53
分享一下感谢

作者: 于叔 时间: 2018-12-5 15:24
想看看想看看

作者: 周宇六六 时间: 2018-12-24 14:13

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

作者: 球球球球 时间: 2018-12-29 14:18
66666666666666

作者: 前端123 时间: 2018-12-30 16:58

......................

作者: vsbdmbr 时间: 2019-1-8 19:34
看看行不行啊啊

作者: Mr_Brown_bear 时间: 2019-1-10 23:24

围观下，求大神指导下

作者: 奉陪 时间: 2019-1-24 14:39
找了很久终于找到了

作者: 发抖的小啊喵 时间: 2019-1-30 15:07
学习学习!!!

作者: will890203 时间: 2019-1-31 22:55
woyao zhige a

作者: heyangwen 时间: 2019-2-9 15:47
01244564135603246546

作者: lzmxiatian531 时间: 2019-2-9 18:00
看一下哈哈哈

作者: YC. 时间: 2019-2-18 15:54
标题: RE: 卡拉 OK 字幕效果

学习学习

作者: 汤小鑫 时间: 2019-2-18 21:47
看一看.......................................................

作者: 大明一条 时间: 2019-2-23 22:40
学习学习呀

作者: 君桀 时间: 2019-3-23 23:39
good!!!!!!!!!!!!!!

作者: 沈阳 时间: 2019-8-26 09:20
谢谢分享

作者: 2289923317 时间: 2020-1-5 01:48
00000000000000000000000000000000000000

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2