html怎么在框架内打字,CSS3里怎么实现打字动画

相较于之前的CSS版本，我们利用css3可以实现很多炫酷的东西，比如老版的CSS无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做出来的。

Document

.box {

width:100%;

height:500px;

text-align:center;

position:relative;

}

.container {

width:80%;

height:400px;

border:1px solid red;

text-align:left;

margin:0 auto;

}

.container span {

display:inline-block;

border:1px solid red;

transition: all 2s;

transform:translateY(0px) rotate(0deg);

font-size:14px;

}

textarea {

width:200px;

resize:none;

height:20px;

line-height:20px;

padding:10px 0px;

font-size:14px;

font-weight:400;

}

.clone {

font-size:14px;

border:1px solid red;

width:80%;

height:20px;

margin:0 auto;

line-height:20px;

padding:10px 0px;

text-align:left;

visibility:hidden;

}

.clone span {

transition:all 2s;

position:absolute;

}

//计算出input输入框的偏移值

var container = document.querySelector(".container");

var inner = document.querySelector(".inner");

var clone = document.querySelector(".clone");

var textarea = document.querySelector(".textarea");

var offx = (container.offsetWidth - textarea.offsetWidth-20)/2;

var offy = (container.offsetHeight + inner.offsetHeight);

//创造一个span标签 需要注入需要注入起始坐标

function createspan(text,x,y) {

this.text = text;

this.x = x;

this.y = y;

this.init = {};

}

createspan.prototype.render = function() {

var span = document.createElement("span");

container.appendChild(span);

span.style.display = "inline-block";

span.style.transform = "translateX("+this.x+"px) translateY("+this.y+"px) rotate(720deg)";

span.style.transition = "all 2s";

span.innerHTML = this.text;

this.init = span;

}

createspan.prototype.recover = function() {

var that = this;

setTimeout(function(){

that.init.style.transform = "translateX(0px) translateY(0px) rotate(0deg)";

},10)

}

var newtext = "";

var oldtext = "";

var x = 0;

var y = 0;

var total = "";

//监听textarea文本框的输入变化情况

textarea.addEventListener("input",function(){

var text = "";

if (inner.offsetWidth >= container.offsetWidth ) {

offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth;

}

else if (inner.offsetWidth >= textarea.offsetWidth*3) {

offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth*3;

}

else if (inner.offsetWidth >= textarea.offsetWidth*2) {

offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth*2;

} else if(inner.offsetWidth>=textarea.offsetWidth) {

offx = (container.offsetWidth - textarea.offsetWidth-20)/2 - textarea.offsetWidth;

}

//先算文字的变化 两种情况一种是增加一种是减少

newtext = textarea.value;

oldtext = inner.innerHTML;

newtext = newtext.trim();

//添加字符

if(newtext.length > oldtext.length) {

for(var i = 0;i < newtext.length;i++) {

if(newtext[i] != oldtext[i]) {

text += newtext[i];

inner.innerHTML = newtext;

}

}

total += text;

// 生成

for(var i =0;i < text.length;i++) {

var a = new createspan(text[i],offx,offy);

a.render();

a.recover();

}

}

//删除字符

})

相信通过这个案列大家会熟练的掌握CSS3的这个功能，更多精彩请关注php中文网其它相关文章！

相关阅读：