先給大家附上效果圖：
最近做項目的時候需要實現一個字符逐個出現的打字效果，用css的clip+css的動畫實現的，與自己寫的打字機效果相結合，整
理一起，效果很贊。
先來說說這個線條，我們會看到它是條，實際上就是個四周border有規律的顯示隱藏，那么這里必定會想到after，before屬性，
我們暫且先考慮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(上，右，底，
左)，比如顯示上邊框，那么就是：
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中調用顯示：
.box:after{-webkit-animation:clipMe s linear infinite;}當然，我們再加一個一模一樣的before就ok了，他們的時間間隔為s，這里要注意，如果你是延遲s，那么你會在s內看到的是整
個邊框出現，這里要改為延遲-s，這個問題就會完美解決。
.box:before{-webkit-animation:clipMe s -s linear infinite;}/***************************************************************/
再來說說打字機，打字機無非就是不斷替換顯示字符顯示在屏幕上，先獲取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();});以上就是本文的全部內容，希望對大家有所幫助
新聞熱點
疑難解答
