Css3 및 JQuery_javascript 기술을 기반으로 타자기 효과 구현

렌더링이 첨부되어 있습니다:

최근 프로젝트를 진행하면서 문자가 하나씩 나타나는 타이핑 효과를 구현해야 했는데요, 이를 구현하기 위해 CSS의 클립 CSS 애니메이션을 제가 작성한 타자기 효과와 결합했습니다. 🎜>

결합하면 효과가 좋습니다.

먼저 이 라인이 라인이라는 점을 살펴보겠습니다. 실제로는 정기적으로 표시되고 숨겨진 경계선입니다. 그러면 여기서는 이전 속성을 염두에 두어야 합니다.

일단은 이후를 생각해 보겠습니다.

먼저 상자를 만든 다음 테두리를 만듭니다

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

다음으로 해야 할 일은 정기적으로 표시하고 숨기는 것입니다. 여기서는 CSS 순환 백분율 진행률 표시줄의 구현 원리에 대해 설명했습니다.

여기서는 이를 구현하는 방법에 대해 먼저 이야기하겠습니다. 위쪽 테두리-왼쪽-아래-오른쪽을 표시하려고 하므로 루프가 있습니다. 클립에 따라 직사각형(위, 오른쪽, 아래,

왼쪽) 예를 들어 위쪽 테두리가 표시되면 다음과 같습니다.

클립:정사각형(px,px,px,px);

애니메이션을 사용하여 순서대로 표시하면 됩니다

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

물론 이전에 동일한 항목을 추가해도 괜찮습니다. 시간 간격은 s입니다. 여기서 s를 지연하면 s에 표시되는 내용은 전체입니다.

테두리가 나타나는데, 여기서 Delay-s로 변경하시면 이 문제는 완벽하게 해결될 것입니다.

.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>

획득 후 디스플레이를 하나씩 교체하고,

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

위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다