卡拉 OK 字幕效果
卡拉 OK 中的字幕随着歌曲的进行会逐渐点亮，由于字幕不是一个一个地点亮而是逐渐过渡，所以我们在网页中实现该效果时，要通过两个层来实现，两个层的文字相同，颜色不同，底层不变，上层逐渐拉宽以遮盖下层，就实现了该效果，在 Flash 中实现这种效果时，也是本原理。本文给出基本示例，以求抛砖引玉。
重点是：两层的文字大小和行高相同，为第二个层设置合理的 position、top、overflow、width 样式属性和 nowrap HTML 属性。
注意，不同的浏览器可能因为对 CSS 的解释不同和缺乏某些属性支持，无法实现本效果，请在 IE 中察看示例。
卡拉 OK 字幕效果
|
谁在乎我的心里有多苦 谁在乎我的心里有多苦 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
卡拉 OK 字幕效果
卡拉 OK 中的字幕随着歌曲的进行会逐渐点亮,由于字幕不是一个一个地点亮而是逐渐过渡,所以我们在网页中实现该效果时,要通过两个层来实现,两个层的文字相同,颜色不同,底层不变,上层逐渐拉宽以遮盖下层,就实现了该效果,在 Flash 中实现这种效果时,也是本原理.本文给出基本示例,以求抛砖引玉. 重点是:两层的文字大小和行高相同,为第二个层设置合理的 position.top.overflow.width 样式属性和 nowrap HTML 属性. 注意,不同的浏览器可能因为对 CSS 的解释不同和
-
Python如何根据字幕文件自动给视频添加字幕效果
目录 功能描述: 字幕文件格式: 扩展库: 参考代码: 运行方式: 总结 功能描述: 根据给定的字幕文件中的字幕信息,自动给视频添加字幕,运行程序后输入要添加字幕的视频文件和对应的字幕文件路径即可.实际使用时不需要对程序做任何修改,只需要根据实际的视频内容来修改字幕文件就可以,自动把字幕文字添加到视频下方并居中显示. 字幕文件格式: 扩展库: pip install moviepy 1.0.0 pip install imageio pip install imageio-ffmpeg 另外,需
-
WPF实现上下滚动字幕效果
本文实例为大家分享了WPF上下滚动字幕的具体代码,供大家参考,具体内容如下 XAML代码: <local:WorkSpaceContent x:Class="SunCreate.CombatPlatform.Client.NoticeMarquee" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.c
-
用javascript实现代替marquee的滚动字幕效果代码
由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了之所以抛弃marquee是因为marquee是一个严重影响用户体验的东西,你把数十行内容压缩到几行滚动的确帮助你压缩了排版空间,但你有没有想过用户可能因为想阅读其中一两行的内容而不得不在你这个滚动上等半天?就以经典论坛页面上部"BlogBeta 数字引擎p4 3.0服务器只要6999元/年"广告文字右边的聚合文字滚动为例,你觉得这是一个很好的用户体验么?W3C的专家们难道还不如一群无知
-
用javascript代替marquee的滚动字幕效果代码
由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marquee标签的朋友,不妨先阅读一下这篇文章.第一种方法:用javascript模拟marquee的做法.出处:网易游戏 热点新闻 滚动新闻 var marqueeContent=new Array(); marqueeContent[0]="用"梦幻密保"快速取回帐号密码"; marqueeContent[1]="网易将军令
-
使用JavaScript实现连续滚动字幕效果的方法
我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够"连续",我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍.然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动).当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置.结果我们看到的就是连续
-
利用jQuery实现打字机字幕效果实例代码
实现效果: 实现原理: 把html里的代码读进来, 然后跳过"<"和">"之间的代码, 顺便保存了内容的格式, 然后一个定时器,逐个输出. 用到的基础知识: jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuer
-
小程序实现左右来回滚动字幕效果
本文实例为大家分享了小程序左右来回滚动字幕的具体代码,供大家参考,具体内容如下 wxml: <!--pages/market/market.wxml--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block
-
修改好的jquery滚动字幕效果实现代码
最终效果图 源代码: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> <script type = "
-
Andorid TextView字幕效果实例
一.效果图 二.代码 复制代码 代码如下: public class TextSubView extends TextView { private TextPaint mPaint; public TextSubView(Context context, AttributeSet attrs) { super(context, attrs); mPaint = new TextPaint(getPaint()); mPaint.setStyle(TextPaint.Style.STROKE);