css3線條圍繞跑馬+jquery打字機效果

原文地址：css3線條圍繞跑馬+jquery打字機效果

 

有圖有真相，今天偶然看到了一種效果，仔細看了下，發現它是用css的clip+css3的動畫實現的，簡直叼。因而本身拿來了前一陣子寫的打字機效果，一塊兒合併，稍微整理了下。

點這裏(chrome瀏覽器)：查看演示

先來講說這個線條，咱們會看到它是2條，實際上就是1個四周border有規律的顯示隱藏，那麼這裏一定會想到after，before屬性，咱們暫且先考慮after。

先創建一個box，而後after一個邊框

1 <div class="box"></div>

1 .box:before{
2 content: '';
3 position: absolute;
4 width:206px;height: 206px;border:2px red solid;
5 left:-5px;top:-5px;
6 z-index: 1;
7 }

 

接下來要作的就是讓它有規律的顯示隱藏就能夠了，這裏要用到clip屬性，我這篇文章有講到：css3圓形百分比進度條的實現原理。

在這裏說說咱們這個如何實現，首先我要讓這個先顯示上邊框-左-底-右，這樣就有了一個循環。根據clip，rect(上，右，底，左)，好比顯示上邊框，那麼就是：

clip:rect(0px,210px,1px,0px);

 

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

@-webkit-keyframes clipMe{
0%{ clip: rect(0px, 210px, 2px, 0px); }
25%{ clip: rect(0px, 2px, 210px, 0px); }
50%{ clip: rect(208px, 210px, 210px, 0px); }
75%{ clip: rect(0px, 210px, 210px, 208px); }
100%{ clip: rect(0px, 210px, 2px, 0px); }
}

 

而後再after中調用顯示：

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

 

固然，咱們再加一個如出一轍的before就ok了，他們的時間間隔爲4s，這裏要注意，若是你是延遲4s，那麼你會在4s內看到的是整個邊框出現，這裏要改成延遲-4s，這個問題就會完美解決。

.box:before{
-webkit-animation:clipMe 8s -4s 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(0, strlen) + "_";
me.obj.html(str);

//內容打印完畢
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + 1;
}, 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 = 0;
var t = setInterval(function(){
str = con.substr(0, strlen) + "_";
me.obj.html(str);

//內容打印完畢
if(strlen == con.length){
clearInterval(t);
}
strlen = strlen + 1;
}, me.speed);
}
}
var a = new Type($('.box'), 200, '正在初始化...');
a.init();
});

 

也能夠點擊右下角查看演示，右鍵查看源碼。

碼字不易，轉載請註明來源，謝謝！