相较于之前的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的这个功能，更多精彩请关注创想鸟其它相关文章！
相关阅读：
CSS3里怎么实现loading动画效果
CSS3里怎么实现单选框动画特效
立即学习“前端免费学习笔记（深入）”；
CSS里的if条件hack怎么写
以上就是CSS3里怎么实现打字动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545287.html
微信扫一扫 
支付宝扫一扫 
