!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的這個功能，更多精彩請關注php 其它相關文章！

相關閱讀：

CSS3里怎么實現loading動畫效果

CSS3里怎么實現單選框動畫特效

CSS里的if條件hack怎么寫

以上就是CSS3里怎么實現打字動畫的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。