最近做項(xiàng)目，有需求實(shí)現(xiàn)一個(gè)字符逐個(gè)出現(xiàn)，類(lèi)似于打字機(jī)效果，于是上網(wǎng)搜了相關(guān)資料，接下來(lái)，小編就給大家詳細(xì)介紹基于Css3和JQuery實(shí)現(xiàn)打字機(jī)效果，需要的朋友可以參考下

先給大家附上效果圖：

最近做項(xiàng)目的時(shí)候需要實(shí)現(xiàn)一個(gè)字符逐個(gè)出現(xiàn)的打字效果，用css的clip+css的動(dòng)畫(huà)實(shí)現(xiàn)的，與自己寫(xiě)的打字機(jī)效果相結(jié)合，整

理一起，效果很贊。

先來(lái)說(shuō)說(shuō)這個(gè)線條，我們會(huì)看到它是條，實(shí)際上就是個(gè)四周border有規(guī)律的顯示隱藏，那么這里必定會(huì)想到after，before屬性，

我們暫且先考慮after。

先建立一個(gè)box，然后after一個(gè)邊框

 <div class="box"></div>
 .box:before{
 content: '';
 position: absolute;
 width:px;height: px;border:px red solid;
 left:-px;top:-px;
 z-index: ;
 }

接下來(lái)要做的就是讓它有規(guī)律的顯示隱藏就可以了，這里要用到clip屬性，我這篇文章有講到：css圓形百分比進(jìn)度條的實(shí)現(xiàn)原理。

在這里說(shuō)說(shuō)我們這個(gè)如何實(shí)現(xiàn)，首先我要讓這個(gè)先顯示上邊框-左-底-右，這樣就有了一個(gè)循環(huán)。根據(jù)clip，rect(上，右，底，

左)，比如顯示上邊框，那么就是：

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

我們只需用animation讓它依次顯示就ok

@-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中調(diào)用顯示：

.box:after{
-webkit-animation:clipMe s linear infinite;
}

當(dāng)然，我們?cè)偌右粋€(gè)一模一樣的before就ok了，他們的時(shí)間間隔為s，這里要注意，如果你是延遲s，那么你會(huì)在s內(nèi)看到的是整

個(gè)邊框出現(xiàn)，這里要改為延遲-s，這個(gè)問(wèn)題就會(huì)完美解決。

.box:before{
-webkit-animation:clipMe s -s linear infinite;
}

/***************************************************************/
再來(lái)說(shuō)說(shuō)打字機(jī)，打字機(jī)無(wú)非就是不斷替換顯示字符顯示在屏幕上，先獲取box里的內(nèi)容，

<div class="box">
<span>/**僅共娛樂(lè),然并卵**/</span>
<p>Login : Jmingzi</p>
<p>password : ******</p>
<p>Access is granted</p>
<span>Welcome ymblog.net !</span>
</div>

獲取以后再一個(gè)個(gè)替換顯示，

var t = setInterval(function(){
str = con.substr(, strlen) + "_";
me.obj.html(str);
//內(nèi)容打印完畢
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + ;
}, me.speed);

在這里我只不過(guò)將它封裝為一個(gè)類(lèi)，便于初始化一些參數(shù)，完整代碼：

//初始化工作，獲取幾段文字內(nèi)容，將它們隱藏后逐個(gè)顯示即可
$(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);
//內(nèi)容打印完畢
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + ;
}, me.speed);
}
}
var a = new Type($('.box'), , '正在初始化...');
a.init();
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助

您可能感興趣的文章: