Réalisation d'un effet machine à écrire basé sur les compétences Css3 et JQuery

Réalisation d'un effet machine à écrire basé sur les compétences Css3 et JQuery_javascript

WBOY

Libérer： 2016-05-16 15:45:38

original

1682 Les gens l'ont consulté

Ci-joint à vous le rendu :

Lorsque je travaillais sur un projet récemment, j'avais besoin d'obtenir un effet de frappe où les caractères apparaissent un par un. J'ai utilisé l'animation clip css de CSS pour y parvenir, combinée à l'effet de machine à écrire que j'ai écrit, le tout <.>

Une fois combiné, l'effet est génial.

Parlons d'abord de cette ligne. Nous verrons que c'est une ligne, en fait, c'est une bordure qui est régulièrement affichée et masquée. Ensuite, les attributs après et avant doivent venir à l'esprit ici.

Réfléchissons à l'après pour l'instant.

Créez d'abord une boîte, puis une bordure

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

Copier après la connexion

La prochaine chose à faire est de l'afficher et de le masquer régulièrement. L'attribut clip est utilisé ici, j'en ai parlé dans cet article : Le principe de mise en œuvre de la barre de progression circulaire en pourcentage CSS.

Parlons de la façon d'implémenter cela ici. Tout d'abord, je veux que cela affiche la bordure supérieure gauche-bas-droite, donc il y a une boucle. Selon clip, rect (haut, droite, bas,

Gauche), par exemple, si la bordure supérieure est affichée, alors c'est :

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

Il suffit d'utiliser une animation pour l'afficher en séquence

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

Copier après la connexion

Ensuite, appelez l'écran après :

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

Copier après la connexion

Bien sûr, ce n'est pas grave si nous ajoutons un identique avant. Leur intervalle de temps est s. Notez ici que si vous retardez s, alors ce que vous verrez dans s est l'intégralité

Une bordure apparaît, remplacez-la par delay-s ici, et ce problème sera parfaitement résolu.

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

Copier après la connexion

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

Parlons de la machine à écrire. La machine à écrire n'est rien d'autre que de remplacer constamment les caractères affichés et de les afficher à l'écran. Tout d'abord, récupérez le contenu dans la boîte,

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

Copier après la connexion

Après obtention, remplacez les afficheurs un par un,

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

Copier après la connexion

Ici je viens de l'encapsuler dans une classe pour faciliter l'initialisation de certains paramètres :

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

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde