基于Cs3和JQuery实现打字机效果

首先将渲染图附加到每个人身上：

最近做项目的时候，需要一个一个的实现一个字符的打字效果，这是通过css clip css的动画，结合我自己写的打字机效果，整体来实现的

加在一起，效果很好。

先说这条线，我们会看到它是一条线，其实是一条规则的显示，隐藏在边框周围，所以这里一定要想到after和before属性。

我们暂时考虑一下。

先创建一个框，然后创建一个边框

{ content : }之前的div class=' box '/div . box : '；绝对位置：宽度： px；高度：像素；border:px红色固体；left :-px；top :-px；z指数：}接下来要做的就是定期显示和隐藏。这里，使用了剪辑属性。我的文章讲了css循环百分比进度条的实现原理。

让我们谈谈如何实现这一点。首先，我想显示上边框-左-下-右，这样就有一个循环。根据剪辑，矩形(上，右，下，

左)，比如显示上边框，那么就是：

clip:rect(px，px，px，px)；

我们只需要用动画让它依次出现，然后ok

@-web kit-关键帧clipMe{%{ clip: rect(px，px，px，px)；}%{ clip: rect(px，px，px，px)；}%{ clip: rect(px，px，px，px)；}%{ clip: rect(px，px，px，px)；}%{ clip: rect(px，px，px，px)；}}然后在：

. box : after {-WebKit-animation 3 : clipme的线性无限；}当然如果之前加一个一模一样的我们就可以了，它们的时间间隔是S，这里要注意的是，如果你延迟S，你会看到S中的整体。

出现了一个边框，这里要改成delay -s，这个问题就完美解决了。

. box : before {-web kit-animation 3 : clipme s-s线性无限；}/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.

Div class='box'span/**仅用于娱乐，但带有鸡蛋* *//spanlogin:j子明/pppassword 3360 * * * * */批准进入/pspanwelcome ymblog.net！/span/div获取它，然后逐个替换它。

var t=SetInterval(function(){ str=con . substr(，strlen)' _ '；me . obj . html(str)；//如果(strlen==con . length){ clear interval(t)，则打印内容；} strlen=strlen}，me . speed)；这里我只是把它封装成一个类，这样方便初始化一些参数，完整的代码：

//初始化作品，获取几段文字，隐藏后逐个显示。$ (function () {function type (obj，speed，welcome) {this。obj=obj速度=速度；this.welcome=欢迎；} type . prototype={ init : function(){ var str=this . obj . html()；this . obj . html(this . welcome)；this . add(str)；}，添加：函数(con){ var me=this；var strvar strlen=；var t=SetInterval(function(){ str=con . substr(，strlen)' _ '；me . obj . html(str)；//如果(strlen==con . length){ clear interval(t)，则打印内容；} strlen=strlen}，me . speed)；}}var a=新类型($(')。方框')，'正在初始化.');a . init()；});以上就是本文的全部内容，希望对大家有所帮助