Rumah > Artikel > hujung hadapan web > 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.
<div class="box"></div> .box:before{ content: ''; position: absolute; width:px;height: px;border:px red solid; left:-px;top:-px; z-index: ; }
Kiri), sebagai contoh, jika sempadan atas dipaparkan, maka ia ialah:
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); } }
.box:after{ -webkit-animation:clipMe s linear infinite; }
Sempadan muncul, tukarkannya kepada delay-s di sini, dan masalah ini akan diselesaikan dengan sempurna.
.box:before{ -webkit-animation:clipMe s -s linear infinite; }/*************************************************** *************/
<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