本文介绍如何利用CSS3的clip属性配合动画实现边框循环显示，并结合jQuery定时器逐字替换文本，打造流畅的打字机特效。通过封装类管理参数，解决延迟导致的边框显示异常，提供完整的代码实现方案。
首先展示最终实现的视觉效果。
CSS3动态边框实现原理
在近期项目开发中，需要实现字符逐个出现的打字机效果。这里采用CSS的clip属性结合CSS动画来绘制动态边框，并将其与自定义的打字机逻辑相结合，整体效果非常出色。
整合后的方案运行稳定且视觉表现良好。
首先分析边框线条的实现原理。我们看到的线条实际上是通过有规律地显示和隐藏四周的border实现的，这自然让人联想到使用::after伪元素。
此处暂时仅考虑使用::after伪元素进行处理。
首先创建一个名为box的容器，并为其添加::after伪元素以生成边框。
<div class="box"></div>
.box:before{
content: '';
position: absolute;
width:px;height: px;border:px red solid;
left:-px;top:-px;
z-index: ;
}接下来需要让边框按照特定规律进行显示和隐藏，这里核心用到的是clip属性，相关原理可参考关于CSS圆形百分比进度条实现的文章。
具体实现思路是：让边框依次显示上边框、左边框、下边框、右边框，从而形成一个循环动画。根据clip属性定义的rect(上, 右, 底, 左)参数，当需要显示上边框时，设置相应的rect值。
例如，要控制上边框的显示，需要配置rect参数。
使用clip: rect(px, px, px, px);来定义裁剪区域。
只需利用animation属性让边框依次显示即可达成效果。
@-webkit-keyframes 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); }
}在::after伪元素中调用该动画样式。
.box:after{
-webkit-animation:clipMe s linear infinite;
}此外，为了增强视觉效果，可以添加一个完全相同的::before伪元素。两者的动画时间间隔设置为s。需要注意的是，如果直接设置延迟s，会导致在s时间内看到完整的边框出现，因此应将延迟改为-s，这样即可完美解决视觉瑕疵。
通过调整负延迟，消除了边框显示时的闪烁问题。
.box:before{
-webkit-animation:clipMe s -s linear infinite;
}jQuery打字机效果封装
/***************************************************************/ 接下来讨论打字机效果的核心逻辑。打字机本质是不断替换并显示字符。首先获取box内的内容，然后将其逐个替换显示在屏幕上。
<div class="box">
<span>/**仅共娱乐,然并卵**/</span>
<p>Login : Jmingzi</p>
<p>password : ******</p>
<p>Access is granted</p>
<span>Welcome ymblog.net !</span>
</div>获取内容后，通过脚本逐字替换显示。
var t = setInterval(function(){
str = con.substr(, strlen) + "_";
me.obj.html(str);
//内容打印完毕
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + ;
}, me.speed);
这里将逻辑封装为一个类，以便于初始化相关参数。完整代码实现如下。
//初始化工作，获取几段文字内容，将它们隐藏后逐个显示即可
$(function(){
function Type(obj, speed, welcome){
this.obj = obj;
this.speed = speed;
this.welcome = welcome;
}
Type.prototype = {
init : function(){
var str = this.obj.html();
this.obj.html(this.welcome);
this.add(str);
},
add : function(con){
var me = this;
var str;
var strlen = ;
var t = setInterval(function(){
str = con.substr(, strlen) + "_";
me.obj.html(str);
//内容打印完毕
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + ;
}, me.speed);
}
}
var a = new Type($('.box'), , '正在初始化...');
a.init();
});以上即为本文的全部内容，希望能为读者提供实用的参考。