Menyedari kesan mesin taip berdasarkan kemahiran Css3 dan JQuery_javascript

Dilampirkan kepada anda ialah pemaparan:

Ketika saya sedang mengerjakan projek baru-baru ini, saya perlu mencapai kesan menaip di mana aksara muncul satu demi satu, saya menggunakan animasi klip css CSS untuk mencapainya Digabungkan dengan kesan mesin taip yang saya tulis, semuanya

Bila digabungkan, kesannya sangat hebat.

Mari kita bincangkan tentang baris ini terlebih dahulu

Mari kita pertimbangkan selepas ini.

Buat kotak dahulu, dan kemudian sempadan

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

Perkara seterusnya yang perlu dilakukan ialah menunjukkan dan menyembunyikannya dengan kerap Atribut klip digunakan di sini saya bercakap mengenainya dalam artikel ini: Prinsip pelaksanaan bar peratusan pekeliling CSS.

Mari kita bincangkan tentang cara melaksanakan ini di sini Pertama sekali, saya mahu ini memaparkan sempadan atas-kiri-bawah-kanan, jadi terdapat gelung. Mengikut klip, tepat (atas, kanan, bawah,

Kiri), sebagai contoh, jika sempadan atas dipaparkan, maka ia ialah:

klip:rect(px,px,px,px);

Kami hanya perlu menggunakan animasi untuk memaparkannya dalam urutan

@-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); }
}

Kemudian panggil paparan selepas:

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

Sudah tentu, tidak mengapa jika kami menambah yang sama sebelum ini

Sempadan muncul, tukarkannya kepada delay-s di sini, dan masalah ini akan diselesaikan dengan sempurna.

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

/*************************************************** *************/

Mari kita bercakap tentang mesin taip Mesin taip tidak lebih daripada sentiasa menggantikan aksara yang dipaparkan dan memaparkannya pada skrin Pertama, dapatkan kandungan dalam kotak,

<div class="box">
<span>/**仅共娱乐,然并卵**/</span>
<p>Login : Jmingzi</p>
<p>password : ******</p>
<p>Access is granted</p>
<span>Welcome ymblog.net !</span>
</div>

Selepas mendapat, gantikan paparan satu persatu,

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

Di sini saya hanya merangkumnya ke dalam kelas untuk memudahkan pemulaan beberapa parameter Kod lengkap:

//初始化工作，获取几段文字内容，将它们隐藏后逐个显示即可
$(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();
});

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang