相较于之前的css版本，我们利用css3可以实现很多炫酷的东西，比如老版的css无法实现的打字动画。下面我们就给大家带来一个小案例，看看酷炫的打字动画是怎么做出来的。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>document</title>
<style type="text/css" media="screen">
.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;
}
</style>
</head>
<body>
<div>
<div>
</div>
<div>
<span></span>
</div>
<textarea placeholder="请输入文字"></textarea>
</div>
</body>
<script>
//计算出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();
}
}
//删除字符
})
</script>
</html>
相信通过这个案列大家会熟练的掌握css3的这个功能，更多精彩请关注其它相关文章！
相关阅读：
css3里怎么实现loading动画效果
css3里怎么实现单选框动画特效
css里的if条件hack怎么写
以上就是css3里怎么实现打字动画的详细内容。