html中颜色打字机效果,基于Css3和JQuery实现打字机效果

先给大家附上效果图：

最近做项目的时候需要实现一个字符逐个出现的打字效果，用css的clip+css的动画实现的，与自己写的打字机效果相结合，整

理一起，效果很赞。

先来说说这个线条，我们会看到它是条，实际上就是个四周border有规律的显示隐藏，那么这里必定会想到after，before属性，

我们暂且先考虑after。

先建立一个box，然后after一个边框

.box:before{

content: '';

position: absolute;

width:px;height: px;border:px red solid;

left:-px;top:-px;

z-index: ;

}

接下来要做的就是让它有规律的显示隐藏就可以了，这里要用到clip属性，我这篇文章有讲到：css圆形百分比进度条的实现原理。

在这里说说我们这个如何实现，首先我要让这个先显示上边框-左-底-右，这样就有了一个循环。根据clip，rect(上，右，底，

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

clip:rect(px,px,px,px);

我们只需用a