<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>打字机效果！</title> <link rel="stylesheet" href=""> <style> #box{display: none;border:1px solid #ccc;margin: 20px 30em;padding: 20px;line-height: 1.8;font: 14px/1.8 "microsoft yahei";} #box:after{content:"_";animation:flash .6s steps(2,start) infinite;-webkit-animation:flash .6s steps(2,start) infinite;} #box.over:after{display:none;} @keyframes flash{ 0%{visibility:visible;} 100%{visibility:hidden;} } @-webkit-keyframes flash{ 0%{visibility:visible;} 100%{visibility:hidden;} } </style> </head> <body> <div id="box"> 1. Whatever is worth doing is worth doing well.<br />  任何值得做的，就把它做好。<br /><br /> 2. Happiness is a way station between too much and too little.<br />  幸福是太多和太少之间的一站。<br /><br /> 3. In love folly is always sweet.<br />  恋爱中，干傻事总是让人感到十分美妙。<br /><br /> 4. The hard part isn’t making the decision. It’s living with it.<br />  做出决定并不困难，困难的是接受决定。<br /><br /> 5. Your happy passer-by all knows, my distressed there is no place hides.<br />  你的幸福路人皆知，我的狼狈无处遁形。<br /><br /> 6. You may be out of my sight, but never out of my mind.<br />  你也许已走出我的视线，但从未走出我的思念。 </div> <script> (function(){ var con=document.getElementById('box'); var index=0; var code=con.innerHTML; con.innerHTML = ""; con.style.display = "block"; function start(){ index++ if(index<=code.length){ switch(code.charAt(index)) { case "<": index=code.indexOf(">",index) break; case "&": index=code.indexOf(";",index) break; } con.innerHTML=code.substring(0,index); setTimeout(start,100) }else{ con.setAttribute('class','over') } } start(); })() </script> </body> </html>